JavaScript (JS) es una parte integral del desarrollo web moderno, lo que nos permite hacer que las páginas web sean interactivas y dinámicas. Entre ellos, la tecnología DOM (Document Object Model) juega un papel vital en el desarrollo front-end. Este blog guiará a los principiantes de front-end a comprender profundamente la tecnología DOM de JavaScript y construir una base sólida para usted.
1. Introducción al DOM
1.1 ¿Qué es DOM?
El modelo de objeto de documento (DOM para abreviar) es una interfaz de programación estándar recomendada por la organización W3C para procesar el lenguaje de marcado extensible. DOM mapea toda la página en una estructura de nodos de múltiples capas, y cada componente en una página HTML o XML es un cierto tipo de nodo, y estos nodos contienen diferentes tipos de datos.
El DOM del W3C consta de tres partes:
- Core DOM: el modelo estándar para cualquier documento estructurado
- XML DOM - modelo estándar para documentos XML
- HTML DOM - modelo estándar para documentos HTML
A través de la interfaz DOM, el programa de aplicación puede acceder a cualquier parte de los datos del documento en cualquier momento, por lo que este mecanismo que utiliza la interfaz DOM también se denomina mecanismo de acceso aleatorio.
1.2 nivel DOM
DOM0
DOM0 (es decir, nivel 0 DOM) en realidad se refiere al DOM en la etapa inicial de la naturaleza experimental que no ha formado un estándar. Dado que DOM0 apareció antes de que W3C se preparara para la estandarización, todavía estaba en la etapa inicial de no formar un estándar. En ese momento, Netscape y Microsoft lanzaron sus propios navegadores de cuarta generación. Desde entonces, DOM ha comenzado a tener varios problemas.
DHTML
DHTML es la abreviatura de Dynamic HTML (HTML dinámico). DHTML no es una tecnología nueva, sino una descripción de una combinación de tecnologías HTML, CSS y JavaScript. Ahora mismo:
- Use HTML para marcar páginas web en varios elementos
- Elementos de estilo y sus posiciones de visualización con CSS
- Manipular elementos y estilos de página con JavaScript
Usando DHTML, parece que es fácil controlar los elementos de la página y lograr efectos originalmente complejos (como: animación cambiando la posición de los elementos). Pero este no es el caso, porque no hay especificación ni estándar, y la implementación de la misma función por parte de los dos navegadores es completamente diferente. Para mantener la compatibilidad del programa, los programadores deben escribir algún código de detección para detectar en qué navegador se está ejecutando JavaScript y proporcionar los scripts correspondientes. JavaScript ha caído en un caos sin precedentes, y DHTML ha dejado una mala impresión en la gente a causa de ello.
CASA 1
Mientras que los proveedores de navegadores participaban en guerras de navegadores, el W3C combinó las ventajas de cada proveedor para lanzar un DOM estandarizado y completó el DOM de primer nivel en octubre de 1998, a saber: DOM1. W3C define DOM como una interfaz independiente de la plataforma y el lenguaje de programación, a través de la cual los programas y scripts pueden acceder y modificar dinámicamente el contenido, la estructura y el estilo de los documentos.
El nivel DOM1 define principalmente la estructura subyacente de los documentos HTML y XML. En DOM1, el DOM consta de dos módulos:
- DOM Core (DOM Core): Especifica un estándar de estructura de documento basado en XML que simplifica el acceso y la manipulación de cualquier parte del documento a través de este estándar.
- DOM HTML: Se extiende sobre la base del núcleo DOM, agregando objetos y métodos para HTML, como el objeto Documento en JavaScript.
DOM2
Basado en DOM1, DOM2 presenta capacidades más interactivas y admite funciones XML más avanzadas. DOM2 divide el DOM en más módulos vinculados. Sobre la base del DOM original, el nivel DOM2 amplía los módulos de subdivisión, como el mouse, los eventos de la interfaz de usuario, el rango y el recorrido, y agrega soporte para CSS a través de la interfaz de objetos. El módulo central DOM en el nivel DOM1 también se ha ampliado para admitir espacios de nombres XML. Los siguientes módulos se introdujeron en DOM2, que contienen muchos tipos e interfaces nuevos:
- Vistas DOM: define una interfaz para rastrear diferentes vistas de documentos
- Eventos DOM (Eventos DOM): Define la interfaz para eventos y manejo de eventos
- Estilo DOM (DOM Style): Define una interfaz para aplicar estilos a elementos basados en CSS
- DOM Traversal and Range: define una interfaz para atravesar y manipular el árbol del documento
DOM3
Nivel DOM3: se amplía aún más el DOM, y se introduce el método de carga y guardado de documentos de forma unificada, que se define en el módulo DOM Load And Save; al mismo tiempo, se agrega el método de validación de documentos, que se define en el módulo de Validación DOM. DOM3 amplía aún más DOM, y los siguientes módulos se introducen en DOM3:
- DOM Load and Save: presenta métodos para cargar y guardar documentos de forma unificada
- Módulo de Validación DOM (DOM Validation): define el método de validación de documentos
- Extensión del núcleo DOM (estilo DOM): admite la especificación XML 1.0, que incluye XML Infoset, XPath y XML Base
1.3 Tipos de documentos
Decimos que el modelo de objeto del documento DOM se abstrae del documento, y el objeto de la operación DOM también es un documento, por lo que es necesario que entendamos el tipo de documento. Los documentos han evolucionado en varios tipos con el desarrollo de la historia, de la siguiente manera:
GML
GML (Lenguaje de marcado generalizado, Lenguaje de marcado generalizado) es un lenguaje de formato de documentos de IBM en la década de 1960, que se utiliza para describir la estructura organizativa, los componentes y sus interrelaciones de documentos. GML proporciona cierta comodidad para el personal de documentos en términos de formatos de documentos específicos, y ya no tienen que desperdiciar energía en especificaciones de fuente, interlineado y diseño de página requerido por el lenguaje de formato de impresora SCRIPT de IBM. Este GML de IBM incluye GML de la década de 1960 e ISIL de la década de 1980.
SGML
SGML (Lenguaje de marcado generalizado estándar) es un estándar ISO (ISO 8879) establecido en 1986 basado en GML de IBM. SGML es el estándar de más alto nivel para los formatos de hipertexto comúnmente utilizados en la actualidad, y es un metalenguaje que puede definir lenguajes de marcas e incluso puede definir "<>"métodos convencionales que no es necesario utilizar. Debido a la complejidad de SGML, es difícil de popularizar. HTML y XML también se derivan de SGML, XML puede considerarse un subconjunto de SGML y HTML es una aplicación de SGML.
HTML
HTML (HyperText Markup Language) es un lenguaje de marcado diseñado para "crear páginas web y otra información que se puede ver en un navegador web". HTML se utiliza para estructurar información, como títulos, párrafos, listas, etc., y para describir hasta cierto punto la apariencia y la semántica de un documento. En 1982, Tim Berners-Lee creó HTML para usarlo en su sistema para facilitar la investigación colaborativa entre físicos de todo el mundo. Después de eso, HTML continuó expandiéndose y desarrollándose, y se convirtió en un estándar internacional mantenido por el World Wide Web Consortium (W3C). El primer estándar oficial fue el RFC 1866 (HTML 2.0), publicado en 1995.
XML
XML (Lenguaje de marcado extensible, Lenguaje de marcado extensible) es una producción simplificada realizada por expertos que utilizan SGML y, de acuerdo con la experiencia de desarrollo de HTML, se produce un conjunto de lenguaje de datos de descripción estricto pero simple. XML comenzó a tomar forma en 1995 y se lanzó como estándar W3C (XML1.0) en febrero de 1998.
XHTML
XHTML (lenguaje de marcado de hipertexto extensible, lenguaje de marcado de hipertexto extensible) es similar al lenguaje de marcado de hipertexto (HTML), pero la sintaxis es más estricta. En términos de relación de herencia, HTML es una aplicación basada en el lenguaje de marcado generalizado estándar (SGML), que es un lenguaje de marcado muy flexible, mientras que XHTML se basa en el lenguaje de marcado extensible (XML), que es un subconjunto de SGML. XHTML 1.0 se convirtió en una recomendación del W3C el 26 de enero de 2000.
2. nodo DOM
2.1 Nodos DOM
De acuerdo con el estándar HTML DOM del W3C, todo en un documento HTML es un nodo:
- Todo el documento es un nodo de documento.
- Cada elemento HTML es un nodo de elemento
- El texto dentro de un elemento HTML es un nodo de texto
- Cada atributo HTML es un nodo de atributo
- La anotación es un nodo de comentario.
2.2 Árbol de nodos HTML DOM
HTML DOM trata los documentos HTML como estructuras de árbol. Esta estructura se llama árbol de nodos :
2.3 Relación de nodos
Los nodos en un árbol de nodos tienen relaciones jerárquicas entre sí.
A menudo usamos términos como padre , hijo y hermano para describir estas relaciones. Los nodos principales tienen nodos secundarios. Los nodos secundarios en el mismo nivel se denominan hermanos (hermanos o hermanas).
- En un árbol de nodos, el nodo superior se llama raíz.
- Cada nodo tiene un padre, excepto la raíz (que no tiene padre).
- Un nodo puede tener cualquier número de nodos secundarios.
- Los hermanos son nodos que tienen el mismo padre.
La siguiente imagen muestra parte del árbol de nodos y las relaciones entre nodos:
2.3.1 Identificación de relación de nodo
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 课程1</h1>
<p>Hello world!</p>
</body>
</html>
Del HTML anterior:
<html>El nodo no tiene padre; es el nodo raíz<head>y<body>el nodo padre de es<html>el nodo- El padre del nodo de texto "¡Hola mundo!" es
<p>el nodo
y:
<html>Un nodo tiene dos nodos secundarios:<head>y<body><head>El nodo tiene dos nodos secundarios: el nodo<meta>con<title><title>El nodo también tiene un nodo secundario: el nodo de texto "Tutorial DOM"<h1>y<p>los nodos son nodos hermanos y también<body>hijos de
y:
-
<head>elemento es<html>el primer nodo secundario del elemento -
<body>elemento es<html>el último hijo del elemento -
<h1>elemento es<body>el primer nodo secundario del elemento -
elemento es el último nodo secundario del elemento
3. Encuentra el DOM
Ahora que entendemos qué es un documento DOM, podemos comenzar a buscar nuestro primer elemento HTML.
3.1 Obtener elementos por ID
getElementById()El método se utiliza para obtener un solo elemento por su id. Veamos un ejemplo:
var title = document.getElementById(‘header-title’);
Obtenemos header-titleel elemento con id y lo guardamos en una variable.
3.2 Obtener elementos por nombre de clase
También puede getElementsByClassName()obtener varios objetos con el método, que devuelve una matriz de elementos.
var items = document.getElementsByClassName(‘list-items’);
Aquí obtenemos list-itemstodos los elementos de la clase y los guardamos en variable.
3.3 Obtener elementos por nombre de etiqueta
También puede getElementsByClassName()obtener un elemento por nombre de etiqueta con el método.
var listItems = document.getElementsByTagName(‘li’);
Aquí obtenemos todos lilos elementos en el documento HTML y los almacenamos en variables.
Selector de consultas
querySelector()El método devuelve el primer elemento que coincide con el selector de CSS especificado . Esto significa que puede obtener elementos por id, clase, etiqueta y todos los demás selectores de CSS válidos. Aquí enumero algunas de las opciones más utilizadas.
Obtener por identificación:
var header = document.querySelector(‘#header’)
Obtener por clase:
var items = document.querySelector(‘.list-items’)
Obtener por etiqueta:
var headings = document.querySelector(‘h1’);
Obtener elementos más específicos:
También podemos usar CSS Selectors para obtener elementos más específicos.
document.querySelector(“h1.heading”);
En este ejemplo, buscamos etiquetas y clases, y devolvemos el primer elemento pasado al Selector de CSS.
Queryselectorall
querySelectorAll()El método es querySelector()exactamente el mismo que excepto que devuelve todos los elementos que coinciden con el Selector de CSS.
var heading = document.querySelectorAll(‘h1.heading’);
En este ejemplo, obtenemos todas las etiquetas que pertenecen a headingla clase h1y las almacenamos en una matriz.
4. Modificación del DOM
HTML DOM nos permite modificar el contenido y el estilo de los elementos HTML cambiando sus atributos.
4.1 Cambiar HTML
El atributo innerHTML se puede utilizar para modificar el contenido de un elemento HTML.
document.getElementById(“#header”).innerHTML = “Hello World!”;
En este ejemplo, obtenemos headerel elemento con id y establecemos su contenido en "¡Hola mundo!".
InnerHTML también puede colocar etiquetas dentro de otra etiqueta.
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"
Coloque la etiqueta aquí en h1cualquier archivo div.
4.2 Cambiar el valor de un atributo
También puede usar el DOM para cambiar el valor de un atributo.
document.getElementsByTag(“img”).src = “test.jpg”;
En este ejemplo, cambiamos todas las <img/>etiquetas a test.jpg .src
4.3 Cambiar estilos
Para cambiar el estilo de un elemento HTML, debe cambiar el atributo de estilo del elemento. Aquí hay un ejemplo de sintaxis para cambiar estilos:
document.getElementById(id).style.property = new style
Veamos un ejemplo, obtenemos un elemento y cambiamos el borde inferior a una línea negra continua:
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;
Las propiedades CSS deben escribirse en camelcase en lugar de los nombres de propiedad CSS normales. En este ejemplo, usamos borderBottomen lugar de border-bottom.
5. Agregar y eliminar elementos DOM
Ahora veamos cómo agregar nuevos elementos y eliminar los existentes.
5.1 Agregar elementos
var div = document.createElement(‘div’);
Aquí createElement()creamos un elemento div con el método que toma el nombre de la etiqueta como parámetro y lo guarda en una variable. Luego, solo necesita darle algo de contenido e insertarlo en el documento DOM.
var content = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);
Aquí, createTextNode()el contenido se crea utilizando el método, que toma una cadena como argumento y luego inserta el nuevo elemento div antes del div que ya existe en el documento.
5.2 Eliminar elementos
var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);
En este caso, obtenemos un elemento y removeChild()lo eliminamos usando el método.
5.3 Elementos de reemplazo
Ahora veamos cómo reemplazar un elemento.
var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);
Aquí usamos replaceChild()el método replace element. El primer argumento es el nuevo elemento y el segundo argumento es el elemento a reemplazar.
5.4 Escribir directamente en el flujo de salida HTML
También puede utilizar write()el método para escribir expresiones HTML y JavaScript directamente en el flujo de salida HTML.
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);
También podemos pasar parámetros como objetos de fecha a expresiones de JavaScript.
document.write(Date());
write()Los métodos también pueden tomar varios parámetros, que se agregan al documento en el orden en que aparecen.
6. Eventos DOM
El HTML DOM permite que Javascript reaccione a eventos HTML. Algunos de los eventos más importantes se enumeran a continuación:
- Click del raton
- carga de pagina
- movimiento del ratón
- cambios en el campo de entrada
6.1 Asignación de eventos
Los eventos se pueden definir directamente en el código HTML usando atributos en la etiqueta. El siguiente es un ejemplo de un evento onclick :
<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>
En este ejemplo, cuando se hace clic en el botón, <h1/>el texto de cambiará a "¡Hola!".
También puede llamar a una función cuando se activa un evento, como se muestra en el siguiente ejemplo.
<h1 onclick=”changeText(this)”>Click me!</h1>
Aquí llamamos al método cuando se hace clic en el botón changeText(), pasando el elemento como un atributo.
También es posible asignar el mismo evento a varios elementos con código Javascript.
document.getElementById(“btn”).onclick = changeText();
6.2 Especificar detectores de eventos
A continuación, veamos cómo asignar detectores de eventos a elementos HTML.
document.getElementById(“btn”)addEventListener('click', runEvent);
Aquí acabamos de especificar un evento de clic para llamar al método runEvent cuando se hace clic en el elemento btn.
Por supuesto, también es posible asignar múltiples eventos a un solo elemento:
document.getElementById(“btn”)addEventListener('mouseover', runEvent);
Resumir
A través de este blog, tenemos una comprensión preliminar de los conceptos básicos y los pasos operativos de la tecnología DOM de JavaScript. DOM nos permite usar JavaScript para modificar dinámicamente el contenido de la página web para lograr interactividad y dinamismo. Espero que esta guía introductoria pueda ayudar a los novatos en la interfaz de usuario a comprender mejor la tecnología DOM y sentar una base sólida para el aprendizaje y la práctica en el futuro. A medida que profundices, descubrirás más sobre la complejidad y el poder del DOM.
En el futuro, nuestra columna de front-end también hablará sobre el alcance, el modelo de eventos, los objetos incorporados, la recolección de basura, las habilidades del algoritmo js y otros artículos. Si está interesado, haga clic en Me gusta en Sanlian y sígame y en mi columna de front-end Nuestro próximo artículo adiós.