¿Cuáles son los métodos para operar nodos DOM en JS?

Esta vez, les traeré algunos métodos para manipular nodos DOM en JS, así como algunas notas sobre cómo manipular nodos DOM en JS. El siguiente es un caso práctico, echemos un vistazo.

Se puede decir que las operaciones DOM son muy comunes en JS. Muchas funciones pequeñas de las páginas web, como agregar y eliminar algunos elementos, se pueden implementar a través de JS. Entonces, para implementar algunas funciones, ¿qué necesitamos saber sobre el DOM? ¡Hoy, este artículo simplemente lo llevará a la puerta de la manipulación DOM en JS! !

1. Nodos del árbol DOM

1. Los nodos DOM se dividen en tres categorías: nodos de elementos (nodos de etiquetas), nodos de atributos y nodos de texto.

Los nodos de atributos y los nodos de texto son nodos secundarios de nodos de elementos. Por lo tanto, al operar, primero debe seleccionar el nodo del elemento y luego modificar los atributos y el texto.

Ver nodos de elementos

1, use los métodos de la serie getElement:

El código HTML específico es el siguiente:

//Ver elementos por atributos de ID

var Li = document. getelementbyid("first");

//Ver atributos de elementos por nombre de clase.

var lis 1 = document . getelementsbyclassname("cls");

//Ver atributos del elemento por nombre.

var lis 2 = document . getelementsbyname("name");

//Ver los atributos del elemento por nombre de etiqueta.

var lis 3 = document . getelementsbytagname("Li"); Notas:

(1) El ID no puede tener el mismo nombre. Si las identificaciones están duplicadas, solo obtendrá la primera identificación.

②Al obtener nodos de elementos, debes esperar hasta que se cargue el árbol DOM.

Dos métodos de procesamiento:

A. Escribir JS al final del documento

B Escribir el código en la función window.onload

p>

(3) Obtenga el formato de la matriz a través de la serie getElements. Se debe obtener cada elemento para operar, pero la matriz no se puede operar directamente.

Documentación. getelementsbytagname("Li")[0]. click = function () { } ④ Esta serie de métodos también puede seleccionar un nodo DOM primero y seleccionar el nodo requerido del nodo DOM seleccionado:

document. getElementsByTagName("Li"); Consulta el método de serie del selector

① Pase el nombre del selector y devuelva el primer elemento encontrado. Generalmente se usa para encontrar ID:

var dq 1 = document . query selector ("# id" (2) Pase un nombre de selector y devuelva todos los elementos encontrados en formato de matriz, sin importar lo que se encuentre; Cuántos. Este método es más general y se puede encontrar con precisión sin importar el atributo.

var dqs 1 = documento .selector de consultas todo ("# p 1 Li"); Ver nodo de atributo

1. getAttribute("Nombre del atributo");

2. Establezca el nodo del atributo:. setAttribute("nombre del atributo", "valor del atributo");

Nota:. setAttribute() tendrá problemas de compatibilidad en versiones anteriores de IE, por lo que puedes usarlo en su lugar. Cambiar a símbolo.

Varios métodos de JS para modificar CSS

1. Utilice setAttribute para establecer clases y estilos.

document.getelementbyid("primero"). set atributo("clase","clase 1");

document.getelementbyid("primero"). establecer atributo ("estilo", "color: rojo;"); 2. Agregue un atributo con. Nombre de la clase.

document.getelementbyid("primero"). nombre de clase = "clase 1"; 3. Uso. estilo. style para modificar directamente un solo estilo. Tenga en cuenta que los nombres de estilo deben utilizar la notación camelCase.

document.getelementbyid("first") style.font size="18px"; 4. Uso. El estilo sigue ahí. style.cssText agrega estilo de secuencia:

// IE no es compatible.

document.getelementbyid("primero"). style = "color: red;";

//Todos los navegadores compatibles

document. getelementbyid("first") style. nodo de texto

1, .innerHTML: obtiene o establece el código HTML en el nodo

2..innerText: obtiene o establece el texto en el nodo, pero no puede configurar el HTML. code.

2. Operaciones de nodo jerárquico

1. ChildNodes: obtiene todos los nodos secundarios del nodo actual (incluidos los nodos de elementos y los nodos de texto). hijos: obtiene todos los nodos secundarios del nodo actual (excepto los nodos de texto)

2. parentNode: obtiene el nodo principal del nodo actual

3. retornos de carro y otros nodos de texto;

. Obtiene el primer nodo de elemento. No hay ningún nodo de texto

: obtiene el último nodo secundario, incluidos los retornos de carro y otros nodos de texto. Nodo;

. lastElementChild: obtiene el último nodo secundario, excluyendo los nodos de texto;

4. p>

p>

. Selección anterior: obtiene el nodo elemento anterior del nodo actual

. Siguiente: obtiene el siguiente nodo hermano del nodo actual, incluido el nodo de texto. p>

. Obtenga el siguiente nodo hermano del nodo actual

5. Atributo: obtenga todos los nodos de atributos del nodo actual

Crear y agregar nodos

1.document.createElement("tagname"): Crea un nuevo nodo y devuelve el nuevo nodo creado

Es necesario configurar los atributos del nuevo nodo con

<. >2. Nodo principal. insertBefore (nuevo nodo, nodo de destino): inserte un nuevo nodo antes del nodo de destino

Nodo principal: inserte un nuevo nodo al final del nodo principal. >

3. Clonar nodo (verdadero): clonar un nodo.

Pasar verdadero significa clonar el nodo de origen y todos los nodos secundarios del nodo de origen;

Pasar falso o no significa clonar solo el nodo actual, no los nodos secundarios.

Eliminar y reemplazar nodos

1. Elimina el nodo secundario especificado del nodo principal.

2. Nodo padre. replaceChild(newnode,oldnode): reemplaza el nodo antiguo con el nuevo nodo del nodo principal.

Creo que después de leer este caso, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.

Lectura recomendada:

Resumen de cómo usar el módulo de registro de nodejs winston

JQuery tiene la función de cambiar estilos automáticamente dentro del tiempo del bucle.