Cómo usar JS dentro de nodos DOM

Lo que les traigo esta vez es cómo usar nodos JS dentro de nodos DOM. ¿Cuáles son las precauciones para usar JS dentro de nodos DOM? El siguiente es un caso práctico, echemos un vistazo.

Se puede decir que las operaciones en DOM son muy comunes en JS. Muchas funciones pequeñas en páginas web, como agregar y eliminar algunos elementos, se pueden implementar usando JS. Entonces, ¿qué necesitamos saber para implementar algunas funciones en el DOM? ¡El artículo de hoy lo guiará brevemente hacia el uso de JS para implementar operaciones DOM!

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, primero debe seleccionar el nodo del elemento y luego modificar las propiedades y el texto. getElementsByTagName("li"); Nota:

① No se puede cambiar el nombre de ID. Si hay ID duplicados, solo se puede tomar el primero.

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

Hay dos métodos de procesamiento:

a. Escribir JS al final del documento

b Escribir código en la función window.onload; /p>

③ La serie getElements toma la forma de una matriz y debe obtener cada elemento que contiene para realizar una operación, en lugar de operar directamente en la matriz. getElementById("p1").getElementsByTagName("li"); Pase el nombre del selector a través de la serie de métodos querySelector

① y devuelva el primer elemento encontrado. Generalmente se usa para encontrar ID:

var dq1 = document.querySelector("#id"); ② Pase un nombre de selector y devuelva todos los elementos encontrados en formato de matriz, sin importar cuántos se encuentren. Este método es más versátil y puede encontrar con precisión cualquier propiedad.

var dqs1 = document.querySelectorAll("#p1 li"); Ver/establecer nodos de atributos

1. Ver nodos de atributos: .getAttribute("Nombre de atributo");

p>

2. Establezca el nodo de atributo: .setAttribute ("Nombre del atributo", "AttributeValue");

Nota: .setAttribute() tendrá problemas de compatibilidad en versiones anteriores. de IE. Puedes utilizar el símbolo .

Hay muchas formas de modificar CSS con JS

1. Utilice setAttribute para establecer clases y estilos.

document.getElementById("first").setAttribute("class", "class1");

document.getElementById("first").setAttribute("style", " color: rojo; "); 2. Utilice .className para agregar un selector de clase.

document.getElementById("first").className = "class1"; 3. Utilice .style.style para modificar directamente un solo estilo. Tenga en cuenta que los nombres de estilo deben utilizar camelCase.

//Todos los navegadores son compatibles

document.getElementById("first").style.cssText = "color: red;"; ver/establecer nodo de texto

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

2: Obtenga o configure el texto en el nodo, el código HTML no se puede configurar.

2. Operaciones de nodo jerárquico

1. .childNodes: obtener todos los nodos secundarios (incluidos los nodos de elementos): obtenga todos los nodos secundarios del nodo actual (incluidos los nodos de elementos y los nodos de texto) .

.children: obtiene todos los nodos secundarios de elementos del nodo actual: obtiene todos los nodos secundarios de elementos del nodo actual (excluidos los nodos de texto).

2: Obtiene el nodo padre del nodo actual.

3.firstChild: obtiene el primer nodo secundario, incluidos los nodos de texto devueltos

.firstElementChild: obtiene el primer nodo de elemento, excluyendo los nodos de texto; .lastChild: obtiene el último nodo secundario, incluidos los nodos de texto (como el valor de retorno);

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

4. .previousSibling : Obtiene el nodo hermano anterior del nodo actual, incluidos los nodos de texto;

..previousElementSibling: Obtiene el nodo hermano del elemento anterior del nodo actual;

.nextSibling : Obtiene el siguiente nodo hermano del nodo actual, incluidos los nodos de texto

.nextElementSibling: obtiene el último nodo hermano del elemento del nodo actual, incluidos los nodos de texto

.Un elemento Nodos hermanos;

5.attributes: obtiene todos los nodos de atributos del nodo actual. Formato de matriz de retorno.

Crear y agregar nuevos nodos

1. document.createElement("tag name"): crea un nuevo nodo y devuelve el nuevo nodo creado.

Necesita cooperar con .setAttribute() para establecer atributos para nuevos nodos.

2. parent.insertBefore (nuevo nodo, nodo de destino): inserta un nuevo nodo antes del nodo de destino en el nodo principal.

Parent.appendChild(nuevo nodo): inserta un nuevo nodo en el extremo interno del nodo principal.

3. source.cloneNode(true): clona un nodo.

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

Pasar falso o no pasar verdadero significa clonar solo el nodo actual y no los nodos secundarios; .

Eliminar y reemplazar nodos

1.parent.removeChild(child): elimina el nodo secundario especificado del nodo principal.

2. parent.replaceChild(nodo nuevo, nodo antiguo): reemplaza el nodo antiguo con el nuevo nodo del nodo principal.

Creo que domina este método después de leer este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados de Gxl Network.

Lectura recomendada:

Puedes abrir y cerrar el menú sin JS

Cómo usar vue para saltar de la página de lista a la página de detalles a través de la identificación