Operaciones integrales de nodos de JavaScript en un artículo

En nuestras páginas web, además de utilizar los métodos proporcionados por el DOM para obtener nodos, también podemos utilizar la relación jerárquica de nodos para obtener nodos. ¡Estos son relativamente simples!

Descripción general del nodo

Todo el contenido de una página web es un nodo (etiqueta, atributo, texto, comentario, etc.) y en el DOM, los nodos están representados por nodos.
Se puede acceder a todos los nodos del árbol HTML DOM a través de JavaScript y todos los elementos HTML (nodos) se pueden modificar, crear o eliminar.

Generalmente, los nodos tienen al menos tres atributos básicos: nodeType (tipo de nodo), nodeName (nombre de nodo) y nodeValue (valor de nodo).

• El nodo de elemento nodeType es 1,
• el nodo de atributo nodeType es 2
• y el nodo de texto nodeType es 3 (los nodos de texto incluyen texto, espacios, saltos de línea, etc.)

En nuestro desarrollo real, las operaciones de nodo operan principalmente en nodos de elementos.

El nivel de nodo

utiliza el árbol DOM para dividir los nodos en diferentes relaciones jerárquicas. La más común es la relación jerárquica padre-hijo-hermano.

1. Nodo principal

node.parentNode

• El atributo parentNode puede devolver el nodo principal de un nodo. Tenga en cuenta que es el nodo principal más cercano.
• Devuelve nulo si el nodo especificado no tiene un nodo principal.

<p clase="padre">
        <p clase="hijo"></p>
    </p>
    <guión>
        var hijo = document.querySelector(".hijo");
        console.log(hijo.parentNode);
    </script>

2. Nodo secundario

1.node.childNodes (estándar)

node.childNodes devuelve una colección que contiene los nodos secundarios del nodo especificado. Esta colección es una colección que se actualiza inmediatamente.

<ul>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
    </ul>
    <guión>
        var ul = document.querySelector('ul');
        // Nodos secundarios childNodes Todos los nodos secundarios, incluidos nodos de elementos, nodos de texto, etc.
        console.log(ul.childNodes);
    </script>

¿Por qué hay cinco nodos de texto aquí? En realidad, corresponden a cinco saltos de línea. Vea la imagen a continuación:

Estos cinco saltos de línea son nodos de texto, más cuatro nodos de elementos li, un total de 9.

Nota: El valor de retorno contiene todos los nodos secundarios, incluidos nodos de elementos, nodos de texto, etc.
Si solo desea introducir los nodos de los elementos, debe manejarlo de manera especial. Por lo tanto, generalmente no recomendamos el uso de childNodes.

var ul = document.querySelector('ul');
	para (var i = 0;i<ul.length;i++){
	    si (ul.childNodes[i].nodeType == 1){
	        console.log(ul.childNodes[i]);
	    }
	}

2.node.children (no estándar)

node.children es una propiedad de solo lectura que devuelve todos los nodos de elementos secundarios. Solo devuelve nodos de elementos secundarios y no se devuelven otros nodos (esto es en lo que nos centramos).
Aunque Children no es un estándar, es compatible con varios navegadores, por lo que podemos usarlo con confianza.

<ul>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
    </ul>
    <guión>
       var ul = document.querySelector('ul');
       console.log(ul.niños);
    </script>

3. El primer nodo secundario y el último nodo secundario

1.node.
2.nodo.último hijo
firstChild devuelve el primer nodo hijo. Si no lo encuentra, devuelve nulo. Lo mismo se aplica a lastChild. Asimismo, se incluyen todos los nodos.

3.nodo.primerElementChild
firstElementChild devuelve el primer nodo del elemento secundario, o nulo si no se encuentra.
4.nodo.últimoElementoNiño
lastElementChild devuelve el último nodo del elemento secundario, o nulo si no se encuentra.

Nota: Estos dos métodos tienen problemas de compatibilidad y solo son compatibles con IE9 y superiores.

5.nodo.hijos[0]
5.nodo.niños[nodo.niños.longitud - 1]
Nota: No existe ningún problema de compatibilidad con el método de escritura de desarrollo real.

<ul>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
        <li>Soy li</li>
    </ul>
    <guión>
       var ul = document.querySelector('ul');
       // 1. Si es un nodo de texto o un nodo de elemento console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. Devuelve el nodo de elemento propio correspondiente. Solo IE9 y superiores admiten console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. No hay ningún problema de compatibilidad console.log(ul.children[0]);
       console.log(ul.children[ul.children.length - 1]);
    </script>

4.Nodo hermano

1.nodo siguiente.
nextSibling devuelve el siguiente nodo hermano del elemento actual, o nulo si no se encuentra. Asimismo, se incluyen todos los nodos.
2.nodo.anteriorHermano
anteriorSibling devuelve el nodo hermano anterior del elemento actual, o nulo si no se encuentra. Asimismo, se incluyen todos los nodos.
3.nodo.siguienteElementoHermano
nextElementSibling devuelve el siguiente nodo del elemento hermano del elemento actual. Si no se encuentra, devuelve nulo.
4.nodo.elementoanteriorSibling
anteriorElementSibling devuelve el nodo del elemento hermano anterior del elemento actual, o nulo si no se encuentra.
Nota: Estos dos métodos tienen problemas de compatibilidad y solo son compatibles con IE9 y superiores.

Entonces, ¿cómo encapsular una función que cumpla con la compatibilidad y pueda encontrar nodos de elementos hermanos

function getNextElementSibling(element){
       var el = elemento;
       mientras(el = el.nextSibling){
           si(el.nodeType == 1){
               devolver el;
           }
       }
       devolver nulo;
   }

El código encapsulado anterior se puede resolver, pero no necesita pensar demasiado, porque el navegador IE está a punto de dejar de funcionar, por lo que solo necesita recordar el nodo nextElementSibling y no debe preocuparse por la compatibilidad. asuntos.

Crear nodo

document.createElement (' tagName ')

El método document.createElenent () crea el elemento Н TML especificado por tagName. Debido a que estos elementos no existían originalmente y se generaron dinámicamente según mis necesidades, también se nos llama crear dinámicamente nodos de elementos .

Agregar nodos y agregar nodos

1.node.appendChild(child)

El método node.appendChild () agrega un nodo al final de la lista de nodos secundarios del nodo principal especificado. Similar al pseudoelemento posterior en CSS.

2.node.insertBefore(secundario, elemento especificado)

<ul></ul>
    <guión>
        var ul = document.querySelector("ul");
        var li =document.createElement("li");
        var intervalo = document.createElement ("intervalo")
        ul.appendChild(li);
        ul.insertBefore(span,ul.children[0]);
    </script>

Eliminar nodo

node.removeChild(child)

El método node.removeChild(child) elimina un nodo secundario del DOM y devuelve el nodo eliminado.

<ul>
        <li>aniu</li>
        <li>casarse</li>
        <li>tom</li>
    </ul>
    <guión>
        var ul = document.querySelector("ul");
        ul.removeChild(ul.niños[2]);
    </script>

Copiar nodo (clonar nodo)

node.cloneNode ()

El método node.cloneNode () devuelve una copia del nodo que llamó a este método. También llamado nodo clonar/nodo copiar
1. Si el parámetro de corchete está vacío o es falso, es una copia superficial, es decir, solo se clona el nodo en sí y los nodos secundarios internos no se clonan.
2. Si el parámetro bracket es verdadero, es una copia profunda, que copiará el nodo en sí y todos sus nodos secundarios.

<ul>
        <li>aniu</li>
        <li>casarse</li>
        <li>tom</li>
    </ul>
    <guión>
        var ul = document.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); //Copia superficial var li2 = ul.children[0].cloneNode(true); //Copia profunda ul.appendChild(li1);
        ul.appendChild(li2);
    </script>