Bienvenido a aprender los tipos de DOM comúnmente utilizados en JavaScript
La lectura de este artículo requiere conocimientos básicos de HTML y CSS, así como conocimientos de js.
Tipos de DOM comunes en JavaScript
Crear elemento: createElement
agregar elemento secundario dentro del elemento primario: appendChild
elemento agregar atributo: setAttribute
return elemento primario: parentNode
eliminar nodo: removeChild
elemento de enlace: addEventListener
Crear elemento: createElement
Crear un elemento significa que
el código necesario para crear un div HTML dentro del js para crear el elemento es: createElement
Para facilitar la comprensión, le mostraré un fragmento de código:
<script type="text/javascript">
//创建元素
var div = document.createElement("div");
//在body里面显示创建的这个div
document.body.appendChild(div);
</script>
El código anterior es para crear un elemento, primero declare una variable con var, el nombre de la variable es div, documento es el significado del archivo, y el siguiente createElement es nuestro protagonista, escriba la etiqueta del elemento que desea crear entre paréntesis , Recuerde poner comillas! Pero creamos el elemento y no lo pusimos en el cuerpo, por lo que no podemos lograr el efecto que queremos, por lo que debemos poner el elemento en el cuerpo después de crear el elemento, de modo que el proceso completo de creación del elemento, creando El elemento está completo.
Agregue elementos secundarios en el elemento primario: appendChild
Agregue elementos secundarios en el elemento primario, por ejemplo, creamos un div arriba, ahora quiero agregar una etiqueta p a este div, así:
<script type="text/javascript">
//创建div
var div = document.createElement("div");
//在body里面显示创建的这个div
document.body.appendChild(div);
//创建p标签
var p = document.createElement("p")
//把p标签放进div里面
div.appendChild(p)
</script>
Esto está escrito después del código anterior, pero la idea es la misma que la anterior, con una etiqueta p agregada en el div.
Devuelve el elemento padre: parentNode
Volviendo al elemento padre, creamos un div arriba, y creamos una etiqueta p dentro del div.
Devolver el elemento padre es, por ejemplo, quiero devolver p al elemento padre, y devolver p al div, ver el código;
<script type="text/javascript">
//创建元素
var div = document.createElement("div");
document.body.appendChild(div);
//创建p标签
var p = document.createElement("p")
//把p标签放进div里面
div.appendChild(p)
//使p返回父元素
var x = p.parentNode
</script>
En este código, devuelvo la etiqueta p al elemento padre. Esta línea de código para devolver el elemento padre es más fácil de entender.
Eliminar un nodo: removeChild
Eliminar un nodo es eliminar un elemento (div u otras etiquetas), pero si usa este nodo de eliminación para algunos efectos dinámicos, no eliminará, sino que ocultará el elemento.
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
/*找到父元素*/
var parent = document.getElementById("div1");
/*找到子元素*/
var child = document.getElementById("p1");
/*将子元素从父元素中删除*/
parent.removeChild(child);
</script>
Este código es para eliminar un elemento secundario en un elemento primario y eliminar otro párrafo, que también es relativamente fácil de entender, no particularmente difícil.
Elemento de enlace: addEventListener
El último es el elemento de enlace, que consiste en agregar un detector de eventos a un elemento. El detector de eventos es el detector de eventos que se activa cuando el usuario hace clic en el botón.
El evento de monitoreo de js es equivalente a registrar un oyente, detectar si el evento correspondiente ocurre en cualquier momento y llamar automáticamente a la función definida para manejarlo si ocurre.
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<button id="my">试一试</button>
<p id="de"></p>
<script>
document.getElementById("my").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("de").innerHTML = Date();
}
</script>
Este código escribe un evento de botón de activación. Cuando el mouse hace clic en el botón, aparecerá un texto a continuación. En general, el evento de monitoreo corresponde al elemento dom, y también necesita declarar el tipo de evento monitoreado.
Después de la explicación, jeje jeje jeje ~
