DOM "Modelo de objetos de documento"

DOM es la interfaz para que JS opere páginas web y su nombre completo es "Modelo de objetos de documento". Su función es convertir la página web en un objeto JS, de modo que se puedan realizar diversas operaciones (como agregar y eliminar contenido) mediante scripts.

• Documentación

–El documento representa el documento completo de la página web HTML.

• Objeto

– La representación de objetos convierte cada parte de la página web en un objeto.

• Modelo

– Usar modelos para representar las relaciones entre objetos, de modo que podamos obtener objetos fácilmente.

El Modelo de Objetos de Documento (DOM) es la interfaz de programación para páginas web. Proporciona una representación estructurada del documento (árbol de estructura) y define una forma en que los programas pueden acceder al árbol de estructura para cambiar la estructura, el estilo y el contenido del documento.

El DOM proporciona una representación de un documento como un grupo estructurado de nodos y objetos que contienen propiedades y métodos . Básicamente, conecta una página web a un script o lenguaje de programación.

Para cambiar algo en la página, JS necesita obtener acceso a todos los elementos de la página. Esta entrada, junto con los métodos y propiedades para agregar, mover, cambiar o eliminar elementos HTML, se obtiene a través del DOM.

El navegador analizará documentos estructurados (como HTML y XML) en una serie de nodos según el modelo DOM y luego formará una estructura de árbol (árbol DOM) a partir de estos nodos. Todos los nodos y la estructura de árbol final tienen interfaces externas estandarizadas. Por tanto, DOM puede entenderse como la interfaz de programación de una página web . DOM tiene su propio estándar internacional, las versiones comunes actuales son DOM 3 y DOM 4.

Estrictamente hablando, DOM no pertenece a JS, pero manipular DOM es la tarea más común de JS, y JS también es el lenguaje más utilizado para manipular DOM. DOM es una API proporcionada por los fabricantes de navegadores para que JS opere HTML. Diferentes fabricantes de navegadores pueden proporcionar diferentes API, por lo que existen problemas de compatibilidad con DOM (una pequeña cantidad de ellas).

1. Nivel de nodo

Cualquier documento HTML o XML puede representarse mediante el DOM como una estructura jerárquica compuesta de nodos. Hay muchos tipos de nodos, cada tipo corresponde a diferente información y/o etiquetas en el documento, también tiene sus propias características, datos y métodos diferentes, y tiene alguna relación con otros tipos. Estas relaciones forman una jerarquía que permite representar el marcado como una estructura de árbol con raíces en un nodo específico. Tome el siguiente HTML como ejemplo:

<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

Entre ellos, el nodo de documento representa el nodo raíz de cada documento. Aquí, el único nodo hijo del nodo raíz es el elemento <html>, al que llamamos elemento de documento (documentElement). El elemento del documento es el elemento más externo del documento, dentro del cual existen todos los demás elementos. Sólo puede haber un elemento de documento por documento. En las páginas HTML, el elemento del documento es siempre el elemento <html>. En un documento XML, no existe dicho elemento predefinido y cualquier elemento puede convertirse en un elemento de documento. Cada etiqueta en HTML se puede representar como un nodo en esta estructura de árbol. Los nodos de elemento representan elementos HTML, los nodos de atributo representan atributos, los nodos de tipo de documento representan tipos de documento y los nodos de comentario representan comentarios. Hay un total de 12 tipos de nodos en el DOM, y todos estos tipos heredan un tipo básico.

1.2.Nodo

La unidad más pequeña de DOM se llama nodo . La estructura de árbol del documento (árbol DOM) se compone de varios tipos de nodos. Cada nodo puede verse como una hoja del árbol del documento.

Hay siete tipos de nodos: Documento, Tipo de documento, Elemento, Texto, Comentario y Fragmento de documento.

Nodos de uso común

nodo de documento

Todo el objeto del documento HTML existe como una propiedad del objeto de ventana y podemos usarlo directamente sin obtenerlo.

Nodo de elemento (Elemento)

Etiquetas HTML en documentos HTML.

Nodo de atributo

Los atributos del elemento representan cada atributo en la etiqueta. Cabe señalar aquí que el nodo de atributo no es un nodo secundario del nodo del elemento, sino una parte del nodo del elemento.

Nodo de texto (Texto)

Contenido de texto en etiquetas HTML.
Otros nodos

Tipo de Documento

etiqueta de tipo de documento (por ejemplo <!DOCTYPE html>).

Comentario

Comentario

Fragmento de documento

fragmento de documento

Estos siete tipos de nodos son todos objetos derivados del objeto de nodo proporcionado de forma nativa por el navegador (el objeto de nodo se analizará a continuación) y tienen algunos atributos y métodos comunes.

1.3.árbol de nodos

Todos los nodos de un documento se pueden resumir en una estructura de árbol según su nivel. Esta estructura de árbol es el DOM.

El nodo de nivel superior es documentel nodo que representa el documento completo. La etiqueta HTML más alta del documento generalmente <html>constituye el nodo raíz de la estructura de árbol, y otros nodos de etiquetas HTML son sus subordinados.

Excepto el nodo raíz, otros nodos tienen tres relaciones con los nodos circundantes.

Relación de nodo principal (parentNode): el nodo superior directo.
Relación de nodo hijo (childNode): nodo subordinado directo.
Relación de nodo hermano (hermano): nodos con el mismo nodo padre.

DOM proporciona una interfaz de operación para obtener nodos de tres relaciones. Entre ellos, la interfaz del nodo hijo incluye atributos como firstChild(primer nodo hijo) y lastChild(último nodo hijo), y la interfaz del nodo hermano incluye atributos nextSibling(el nodo hermano inmediatamente después) y previousSibling(el nodo hermano inmediatamente antes).

2.Tipo de nodo

DOM Nivel 1 describe una interfaz llamada Nodo, que debe ser implementada por todos los tipos de nodos DOM. La interfaz Node se implementa en JavaScript como el tipo Node, al que se puede acceder directamente en todos los navegadores excepto IE. En JavaScript, todos los tipos de nodos heredan del tipo Nodo, por lo que todos los tipos comparten las mismas propiedades y métodos básicos.

2.1 Propiedades

2.1.1.tipo de nodo

El atributo nodeType devuelve un valor entero que indica el tipo de nodo. Los tipos de nodos comunes son los siguientes

Tipo de nodo	valor	Constante correspondiente
nodo de documento	9	Nodo.DOCUMENT_NODE
nodo elemento	1	Nodo.ELEMENT_NODE
Nodo de atributo (attr)	2	Nodo.ATTRIBUTE_NODE
Nodo de texto (texto)	3	Nodo.TEXT_NODE
Nodo de tipo de documento (Tipo de documento)	10	Nodo.DOCUMENT_TYPE_NODE
Nodo de comentarios (Comentario)	8	Nodo.COMMENT_NODE
Nodo Fragmento de documento (DocumentFragment)	11	Nodo.DOCUMENT_FRAGMENT_NODE

<script>
  console.log(document.nodeType); //9
</script>

2.1.2.nombredenodo

La propiedad nodeName devuelve el nombre del nodo.

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

2.1.3.valornodo

El atributo nodeValue devuelve una cadena que representa el valor de texto del propio nodo actual. Este atributo se puede leer y escribir. Solo los nodos de texto (text), los nodos de comentario (comment) y los nodos de atributo (attr) tienen valores de texto.

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeValue); // null
  // 读
  console.log(div.firstChild.nodeValue); //hello world
  // 写
  div.firstChild.nodeValue = '123';
</script>

2.1.4.Contenido del texto

La propiedad textContent devuelve el contenido de texto del nodo actual y todos sus nodos descendientes.

<div id="d1">Hello <span>JavaScript</span> DOM</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.textContent); //Hello JavaScript DOM
</script>

2.1.5.siguienteHermano

La propiedad nextSibling devuelve el primer nodo hermano inmediatamente después del nodo actual. Si no hay ningún nodo hermano detrás del nodo actual, devuelve nulo

( Nota : es posible que aparezcan nodos de texto como "espacio" o "retorno de carro")

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

2.1.6.anteriorHermano

La propiedad anteriorSibling devuelve el nodo hermano más cercano delante del nodo actual. Si no hay ningún nodo hermano delante del nodo actual, devuelve nulo

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div2.previousSibling); //<div id="d1">hello</div>
  console.log(div2.previousSibling === div1); // true
</script>

2.1.7.nodopadre

La propiedad parentNode devuelve el nodo principal del nodo actual. Para un nodo, su nodo padre solo puede ser de tres tipos: nodo de elemento (elemento), nodo de documento (documento) y nodo de fragmento de documento (fragmento de documento).

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentNode); // body
</script>

2.1.8.elementopadre

La propiedad parentElement devuelve el nodo del elemento principal del nodo actual. Si el nodo actual no tiene un nodo principal, o el tipo de nodo principal no es un nodo de elemento, devuelve nulo

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentElement); // body
  // 将父元素节点的背景颜色设置为红色
  div1.parentElement.style.backgroundColor = 'red';
</script>

2.1.9.primer hijo y último hijo

La propiedad firstChild devuelve el primer nodo hijo del nodo actual. Si el nodo actual no tiene nodos hijos, devuelve nulo. Last devuelve el último nodo hijo.

<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

2.1.10.childNodos

La propiedad childNodes devuelve un objeto similar a una matriz (colección NodeList) cuyos miembros incluyen todos los nodos secundarios del nodo actual.

<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

También podemos usar un bucle for para recorrer todos los nodos secundarios de un nodo.

var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
  // ...
}

2.2.Método

Los siguientes métodos se utilizan comúnmente para operar nodos: el método más utilizado es appendChild (), que se utiliza para agregar nodos al final de la lista childNodes.

Nota: ¡Los siguientes cuatro métodos requieren que se llame al objeto del nodo principal!

2.2.1.añadirNiño

El método appendChild acepta un objeto de nodo como parámetro y lo inserta en el nodo actual como el último nodo secundario. El valor de retorno de este método es el nodo secundario del documento insertado.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.2.2.insertar antes()

El método insertBefore se utiliza para insertar un nodo en la posición especificada dentro del nodo principal.

var insertNode = parentNode.insertBefore(newNode, referenceNode);

El método insertBefore acepta dos parámetros: el primer parámetro es el nodo newNode que se insertará y el segundo parámetro es un nodo de referencia del nodo secundario dentro del nodo principal parentNode. newNode se insertará delante del nodo secundario de referenceNode. El valor de retorno es el nuevo nodo insertado newNode

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

2.2.3.removeChild()

El método removeChild acepta un nodo secundario como parámetro y se utiliza para eliminar el nodo secundario del nodo actual. El valor de retorno es el nodo secundario eliminado.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

2.2.4.reemplazarNiño()

El método replaceChild se utiliza para reemplazar un nodo secundario del nodo actual por un nodo nuevo.

var reemplazadoNodo = parentNode.replaceChild(newChild, oldChild);

El método replaceChild acepta dos parámetros: el primer parámetro newChild es el nuevo nodo que se reemplazará y el segundo parámetro oldChild es el nodo secundario que se reemplazará. El valor de retorno es el nodo oldChild que fue reemplazado.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

2.2.5 Otros métodos

clonNodo()

El método devuelve una copia del nodo en el que se llamó al método.

var dupNode = nodo.cloneNode(profundo);

nodo

El nodo a clonar

dupNodo

Clonar el nodo de réplica generado

profundo opcional

Si se debe utilizar la clonación profunda. Si es verdadero, también se clonarán todos los nodos descendientes del nodo. Si es falso, solo se clonará el nodo en sí.

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

3.Tipo de documento

Javascript representa documentos utilizando el tipo de documento. En el navegador, el objeto de documento es una instancia de HTMLDocument y representa la página HTML completa. El objeto de documento es una propiedad del objeto de ventana, por lo que se puede llamar directamente. HTMLDocument hereda de Document.

3.1 Propiedades

elementodocumento

Siempre apunta al elemento <html> en una página HTML.

cuerpo

Apunta directamente al elemento <body>

tipo de documento

Acceda a <!DOCTYPE>, la compatibilidad del navegador es inconsistente y rara vez se usa

título

Obtener el título del documento

URL

Obtenga la URL completa

dominio

Obtenga un nombre de dominio y configúrelo, que a menudo se usa en el acceso entre dominios.

referente

Obtenga la URL de la página vinculada a la página actual, es decir, la URL de la página de origen.

imágenes

Obtenga todos los objetos img y devuelva el objeto de matriz de clase HTMLCollection

formas

Obtenga todos los objetos del formulario y devuelva el objeto de matriz de clase HTMLCollection

Enlaces

Obtenga todos los elementos <a> con atributos href en el documento

3.2.Interfaz de programación DOM

Se puede acceder al HTML DOM a través de JavaScript (y también otros lenguajes de programación).

En el DOM, todos los elementos HTML se definen como objetos .

La interfaz de programación son las propiedades y métodos de cada objeto.

Las propiedades son valores que puede obtener o establecer (como cambiar el contenido de un elemento HTML).

Los métodos son acciones que puede realizar (como agregar o eliminar elementos HTML).

Ejemplo

El siguiente ejemplo cambia el contenido del elemento <p> con id="demo":

<html>
<body>

<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

En el ejemplo anterior, getElementById es el método e internalHTML es la propiedad.

método getElementById

La forma más común de acceder a un elemento HTML es utilizando la identificación del elemento.

En el ejemplo anterior, el método getElementById usa id="demo" para encontrar el elemento.

propiedad HTML interna

La forma más sencilla de obtener el contenido de un elemento es utilizar el atributo internalHTML.

La propiedad insideHTML se puede utilizar para obtener o reemplazar el contenido de un elemento HTML.

La propiedad insideHTML se puede utilizar para obtener o cambiar cualquier elemento HTML, incluidos <html> y <body>.

3.3.Buscar elementos

método	describir
documento.getElementById( identificación )	Buscar elementos por identificación de elemento
document.getElementsByTagName( nombre )	Buscar elementos por nombre de etiqueta
document.getElementsByClassName( nombre )	Buscar elementos por nombre de clase
documento.querySelector()	Devuelve el primer elemento del documento que coincide con el selector CSS especificado
documento.querySelectorAll()	document.querySelectorAll() es un nuevo método introducido en HTML5 que devuelve una lista de todos los nodos de elementos que coinciden con el selector CSS en el documento.

obtenerElementoById()

Devuelve un elemento que coincide con la identificación especificada.

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()

Devuelve una HTMLCollection(pseudomatriz) que contiene todos los elementos que coinciden con el nombre de etiqueta especificado.

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName()

Devuelve una colección HTML HTMLCollection(pseudomatriz) que contiene todos los elementos que coinciden con el nombre de clase especificado.

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

documento.querySelector()

Devuelve el primer elemento del documento que coincide con el selector CSS especificado

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

documento.querySelectorAll()

document.querySelectorAll() es un nuevo método introducido en HTML5 que devuelve una lista de todos los nodos de elementos que coinciden con el selector CSS en el documento.

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

3.4 Agregar elementos

documento.createElement( elemento )

Cree un nuevo elemento HTML para utilizarlo junto con el método appendChild() o insertBefore(). Entre ellos, el método appendChild() agrega un nuevo nodo secundario al final de la lista de nodos secundarios del nodo. El método insertBefore() inserta un nuevo nodo en cualquier posición en la lista de nodos secundarios del nodo.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

3.5.Escribir

documento.escribir()

Escriba texto o expresiones HTML o código JavaScript en el documento.

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

4.Tipo de elemento

El objeto Element corresponde al elemento HTML de la página web. Cada elemento HTML se convertirá en un objeto de nodo Elemento en el árbol DOM.

4.1 Propiedades

atributos: devuelve una colección de todos los atributos relacionados con este elemento.

classList: Devuelve la colección de atributos de clase contenidos en este elemento.

className: Obtiene o establece el valor del atributo de clase del elemento especificado.

clientHeight: obtiene la altura dentro del elemento, incluido el relleno, pero excluyendo las barras de desplazamiento horizontales, los bordes y los márgenes.

clientTop: Devuelve la altura del elemento desde su borde superior.

clientLeft: Devuelve el ancho del elemento desde su borde izquierdo.

clientWidth: devuelve el ancho interno del elemento, incluido el relleno, pero excluyendo las barras de desplazamiento verticales, los bordes y los márgenes.

InnerHTML: establece u obtiene los descendientes del elemento representado por la sintaxis HTML.

tagName: Devuelve el nombre de la etiqueta del elemento actual.

4.2 Métodos comúnmente utilizados

método	describir
element.innerHTML = nuevo contenido html	Cambiar el HTML interno de un elemento
elemento.atributo = valor	Modificar valor de atributo
elemento.getAttribute()	Devuelve el valor del atributo especificado del nodo del elemento.
element.setAttribute ( atributo , valor )	Establecer o cambiar valores de atributos de elementos HTML
elemento.estilo.property = nuevo estilo	Cambiar el estilo de los elementos HTML

elemento.innerHTML

La propiedad establece u obtiene los descendientes de un elemento representado por la sintaxis HTML.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>

elemento.atributo = valor

Modificar el valor de una propiedad existente

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

elemento.getAttribute()

Devuelve el valor del atributo especificado del nodo del elemento.

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

element.setAttribute ( atributo , valor )

Establece o cambia la propiedad especificada al valor especificado.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为divCla
  d1.setAttribute('class', 'divCla');
</script>

elemento.estilo.propiedad

Establece o devuelve el atributo de estilo del elemento.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>

Para obtener más detalles, consulte Objeto de elemento HTML DOM.

Elemento - Referencia de la interfaz API web | MDN

5.Tipo de texto

Los nodos de texto están representados por el tipo Texto y contienen texto sin formato interpretado literalmente, que también puede contener caracteres HTML con escape, pero no código HTML.

5.1 Propiedades y métodos

longitud

longitud del texto

agregar datos (texto)

agregar texto

eliminar datos (comenzar índice, contar)

Eliminar texto

insertarDatos(inicioIndice,texto)

Insertar texto

reemplazarDatos(inicioIndice,recuento,texto)

texto de reemplazo

dividirTexto(comenzarÍndice)

Divida el nodo de texto actual en dos nodos de texto desde la posición de inicio de índice

documento.createTextNode(texto)

Cree un nodo de texto, el parámetro es el texto que se insertará en el nodo

subcadenaDatos(comenzarÍndice,recuento)

Extraer la subcadena de recuento a partir de beginIndex

Caso integral

<div id="container"></div>
<script>
  // 创建文本节点
  var textNode = document.createTextNode('Hello World!');
  // 获取container
  var div = document.getElementById('container');
  // 将文本节点插入container
  div.appendChild(textNode);
  // 替换文本
  textNode.replaceData(0,5,'Hi');
  // 插入文本
  textNode.insertData(0, 'Hello')
</script>