Document Object Model , abreviado DOM, chino:文档对象模型, es标准编程接口recomendada por la organización W3C para procesar lenguajes de marcado extensibles.
DOM Tree se refiere a解析la página HTML a través de DOM y生成la树状结构HTML tree y访问方法correspondiente. Con la ayuda del árbol DOM, podemos operar directa y简易cada contenido de marcado en la página HTML, como el siguiente código HTML
<. html><cabeza>
<title>Jugando con dom</title></head><body>
<p>Soy un nodo dom</p>
<p>
<p>p p</p>
</p></body></html> Resumido en el árbol DOM de la siguiente manera: 
Después de comprender el conocimiento anterior, lo siguiente trata sobre el aprendizaje de la API desde cuatro aspectos: cómo obtener DOM, cómo crear y agregar DOM, cómo modificar DOM y cómo eliminar
DOM
Hay muchas API para obtener DOM, pero todas son muy simples, vamos.
:
document.getElementById("nombre
de
id");
<p id="p">Soy el nodo p</p>
<guión>
var p = document.getElementById("p");
consola.log(p);
</script></body> 
Abra la consola y podrá ver que obtuvo con éxito
:
document.getElementsByTagName
("nombre dela
etiqueta");
<p>Soy el nodo p</p>
<p>Yo también soy un nodo p</p>
<guión>
var p = document.getElementsByTagName("p");
consola.log(p);
for (sea i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Nota : Utilice el método getElementsByTagName() para devolver una colección de objetos con nombres de etiquetas específicos. Debido a que lo que se obtiene es una colección de objetos, debemos recorrerlos si queremos operar los elementos que contiene. El método es dinámico de
:
document.getElementsByClassName
(
"nombre de la clase");
<p class="p">Soy el nodo p</p>
<p class="p">Soy el nodo p</p>
<guión>
var p = document.getElementsByClassName("p");
consola.log(p);
for (sea i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Esto también es muy sencillo, sólo recuérdalo.
a
través de la nueva API de HTML5:
document.querySelector("Ver ejemplos para más detalles"); document.querySelectorAll
("Ver ejemplos para más detalles");
<p class="p">Soy el nodo p</p>
<p class="name">Flor de pera</p>
<p id="info">Información</p>
<guión>
// Obtener var por nombre de etiqueta p = document.querySelector("p");
// Obtener a través del nombre de la clase, recuerde agregar var qname = document.querySelector(".name");
// Obtener por id, recuerda agregar #
var información = document.querySelector("#info");
// Obtiene todos los elementos coincidentes y devuelve la matriz var all = document.querySelectorAll("p");
consola.log(p);
console.log(qname);
consola.log(información);
for (sea i = 0; i < toda.longitud; i++) {
console.log(todos[i]);
}
</script></body> 
Como puede ver, usar la nueva API de HTML5 es muy flexible, por lo que me gusta mucho usarla y le recomiendo que use
. Además, hay algunos elementos especiales que tienen sus propios métodos de adquisición, como. como cuerpo, el elemento html
Sintaxis del elemento:
document.body
Ejemplo:
<cuerpo>;
<guión>
var cuerpo = documento.cuerpo;
consola.log(cuerpo);
</script></body> 
Como puede ver, todo el contenido del elemento del cuerpo se ha obtenido con éxito.
:
document.documentElement
ejemplo:
<cuerpo>
<guión>
var html = documento.documentElement;
consola.log(html);
</script></body> 
.
Ahora comencemos a crear y agregar dom dinámicamente
operar dom es lo mismo que jugar con datos, agregar, eliminar, modificar y verificar, y crear y agregar es equivalente a agregar datos, primero debemos tenerlos y luego agregarlos. Operaciones DOM. Primero, debemos crear el DOM y luego decirle dónde agregarlo. Finalmente, la operación se completa a continuación. Aprendamos cómo crear DOM y cómo agregar DOM
. no tengas miedo, jaja
Sintaxis:
document.createElement
("Nombre del elemento");
Si desea crear dinámicamente un elemento p , puede escribirlo así. Lo mismo ocurre con otras cosas. Aplicar inferencias
var p = document.createElement("p"); y agregar dom. Úselos según la situación. Uno está en el elemento principal. Agregar al final del elemento secundario, el otro es agregar después del elemento secundario especificado
. Lasintaxis del anexo:
node.appendChild
child>)
;
<p>
<a href="">Baidu</a>
</p>
<guión>
var p = documento.createElement("p");
p.innerText = "Soy p"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
Cree dinámicamente la etiqueta de párrafo del elemento p y escriba el texto "Soy p". Finalmente, obtenga el elemento p y agregue p como hijo de p. Este método de adición se agrega al final, por lo que el efecto es como se muestra en la figura. arriba.
Sintaxis:
node.insertBefore(niño, elemento especificado
Ejemplo:
<cuerpo>);
<p>
<a href="">Baidu</a>
<span>Soy el hermano menor span</span>
</p>
<guión>
var p = documento.createElement("p");
p.innerText = "Soy p"
var p = document.querySelector("p");
var a = document.querySelector("a");
//Crea p debajo de p, antes del elemento a p.insertBefore(p, a);
</script></body> 
¿Es este el final? Sí, ¿qué opinas? ¿No es muy simple? Lo simple es suficiente. Todo lo que queda es practicar más. Bueno, pasemos al siguiente paso.
se resume a continuación:
Ejemplo 1: obtenga la etiqueta p de la página y cambie el contenido a "Zhou Qiluo"
<cuerpo>
<p>
<p></p>
</p>
<guión>
var p = document.querySelector("p");
p.innerText = "Zhou Qiluo";
</script></body> Ejemplo 2: haga clic en el botón para generar un hipervínculo de Baidu
<body>
<p>
<button onclick="createBaidu()">Haga clic para generar un hipervínculo de Baidu</button>
</p>
<guión>
función crearBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "Simplemente busque en Baidu y lo sabrá";
p.append(a);
}
</script></body> 
Ejemplo 3: haga clic en el botón, el color del texto en la etiqueta p se vuelve verde y la cabeza de perro
<cuerpo>se cambia manualmente.
<p>
<button onclick="changeColor()">Haga clic para volverse verde</button>
<p>Me pondré verde en un momento</p>
</p>
<guión>
función cambiarColor() {
var p = document.querySelector("p");
p.style.color = "verde";
}
</script></body> 
El método node.removeChild() elimina un nodo secundario del DOM y devuelve el nodo eliminado
Sintaxis:
node.removeChild(child
Caso:
<body>);
<p>
<button onclick="removeP()">Haga clic para eliminar p</button>
<p>Soy p, el tiempo se acabará en un momento</p>
</p>
<guión>
función eliminarP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body> 