Opérations complètes des nœuds JavaScript dans un seul article

Dans nos pages web, en plus d'utiliser les méthodes fournies par le DOM pour obtenir des nœuds, nous pouvons également utiliser la relation hiérarchique des nœuds pour obtenir des nœuds. Celles-ci sont relativement simples. Résumons-les aujourd'hui !

Présentation des nœuds

Tout le contenu d'une page Web est un nœud (étiquette, attribut, texte, commentaire, etc.) et dans le DOM, les nœuds sont représentés par nœud.
Tous les nœuds de l'arborescence HTML DOM sont accessibles via JavaScript et tous les éléments HTML (nœuds) peuvent être modifiés, créés ou supprimés.

Généralement, les nœuds ont au moins trois attributs de base : nodeType (type de nœud), nodeName (nom du nœud) et nodeValue (valeur du nœud).

• Le nœud d'élément nodeType est 1,
• le nœud d'attribut nodeType est 2
• et le nœud de texte nodeType est 3 (les nœuds de texte incluent le texte, les espaces, les sauts de ligne, etc.)

Dans notre développement actuel, les opérations de nœud opèrent principalement sur les nœuds d'élément.

Le niveau nœud

utilise l'arborescence DOM pour diviser les nœuds en différentes relations hiérarchiques. La plus courante est la relation hiérarchique parent-enfant-frère.

1. Nœud parent

node.parentNode

• L'attribut parentNode peut renvoyer le nœud parent d'un nœud. Notez qu'il s'agit du nœud parent le plus proche.
• Renvoie null si le nœud spécifié n'a pas de nœud parent.

<p class="parent">
        <p class="fils"></p>
    </p>
    <script>
        var fils = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2. Nœud enfant

1.node.childNodes (standard)

node.childNodes renvoie une collection contenant les nœuds enfants du nœud spécifié. Cette collection est une collection immédiatement mise à jour.

<ul>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //Nœuds enfants childNodes Tous les nœuds enfants, y compris les nœuds d'élément, les nœuds de texte, etc.
        console.log(ul.childNodes);
    </script>

Pourquoi y a-t-il cinq nœuds de texte ici ? Ils correspondent en fait à cinq sauts de ligne. Voir l'image ci-dessous :

Ces cinq sauts de ligne sont des nœuds de texte, plus quatre nœuds d'éléments li, soit un total de 9.

Remarque : la valeur de retour contient tous les nœuds enfants, y compris les nœuds d'éléments, les nœuds de texte, etc.
Si vous souhaitez uniquement insérer les nœuds d'éléments à l'intérieur, vous devez les gérer spécialement. Par conséquent, nous ne préconisons généralement pas l’utilisation de childNodes.

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

2.node.children (non standard)

node.children est une propriété en lecture seule qui renvoie tous les nœuds des éléments enfants. Il renvoie uniquement les nœuds d'éléments enfants, et les autres nœuds ne sont pas renvoyés (c'est ce sur quoi nous nous concentrons).
Bien que les enfants ne soient pas un standard, il est pris en charge par différents navigateurs, nous pouvons donc l'utiliser en toute confiance.

<ul>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       console.log(ul.enfants);
    </script>

3. Le premier nœud enfant et le dernier nœud enfant

1.node firstChild.
2.node.lastChild
firstChild renvoie le premier nœud enfant. S'il ne le trouve pas, il renvoie null. La même chose s'applique à lastChild. De même, tous les nœuds sont inclus.

3.node.firstElementChild
firstElementChild renvoie le premier nœud d'élément enfant, ou null s'il n'est pas trouvé.
4.node.lastElementChild
lastElementChild renvoie le dernier nœud d'élément enfant, ou null s'il n'est pas trouvé.

Remarque : Ces deux méthodes présentent des problèmes de compatibilité et ne sont prises en charge que par IE9 et versions ultérieures.

5.node.enfants[0]
5.node.children[node.children.length - 1]
Remarque : Il n'y a aucun problème de compatibilité avec la méthode d'écriture de développement actuelle.

<ul>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
        <li>Je suis Li</li>
    </ul>
    <script>
       var ul = document.querySelector('ul');
       // 1. Qu'il s'agisse d'un nœud de texte ou d'un nœud d'élément console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. Renvoie le nœud d'auto-élément correspondant. Seuls IE9 et versions ultérieures prennent en charge console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. Il n'y a pas de problème de compatibilité console.log(ul.children[0]);
       console.log(ul.children[ul.children.length - 1]);
    </script>

4.Nœud Sibling

1.node.
nextSibling renvoie le nœud frère suivant de l'élément actuel, ou null s'il n'est pas trouvé. De même, tous les nœuds sont inclus.
2.node.précédentSibling
previousSibling renvoie le nœud frère précédent de l'élément actuel, ou null s'il n'est pas trouvé. De même, tous les nœuds sont inclus.
3.node.nextElementSibling
nextElementSibling renvoie le nœud d'élément frère suivant de l'élément actuel. S'il n'est pas trouvé, renvoie null.
4.node.précédentElementSibling
previousElementSibling renvoie le nœud d'élément frère précédent de l'élément actuel, ou null s'il n'est pas trouvé.
Remarque : Ces deux méthodes présentent des problèmes de compatibilité et ne sont prises en charge que par IE9 et versions ultérieures.

Alors, comment encapsuler une fonction qui répond à la compatibilité et peut trouver des nœuds d'éléments frères

function getNextElementSibling(element){
       var el = élément ;
       while(el = el.nextSibling){
           si(el.nodeType == 1){
               retourner el;
           }
       }
       renvoie null ;
   }

Le code encapsulé ci-dessus peut être résolu, mais vous n'avez pas besoin de trop réfléchir, car le navigateur IE est sur le point de cesser de servir, vous n'avez donc qu'à vous souvenir du nœud nextElementSibling et vous n'avez pas à vous soucier de la compatibilité. problèmes.

Créer un nœud

document.createElement (' tagName ')

La méthode document.createElenent () crée l'élément Н TML spécifié par tagName. Parce que ces éléments n'existaient pas à l'origine et ont été générés dynamiquement en fonction de mes besoins, nous sommes également appelés créer dynamiquement des nœuds d'éléments .

Ajout de nœuds et ajout de nœuds

1.node.appendChild(child)

La méthode node.appendChild () ajoute un nœud à la fin de la liste des nœuds enfants du nœud parent spécifié. Semblable au pseudo-élément after en CSS.

2.node.insertBefore(enfant, élément spécifié)

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

Supprimer le nœud

node.removeChild(child)

La méthode node.removeChild(child) supprime un nœud enfant du DOM et renvoie le nœud supprimé.

<ul>
        <li>aniu</li>
        <li>se marier</li>
        <li>tom</li>
    </ul>
    <script>
        var ul = document.querySelector("ul");
        ul.removeChild(ul.enfants[2]);
    </script>

Copier le nœud (nœud clone)

node.cloneNode ()

La méthode node.cloneNode () renvoie une copie du nœud qui a appelé cette méthode. Également appelé nœud de clonage/nœud de copie
1. Si le paramètre bracket est vide ou faux, il s'agit d'une copie superficielle, c'est-à-dire que seul le nœud lui-même est cloné et les nœuds enfants à l'intérieur ne sont pas clonés.
2. Si le paramètre bracket est vrai, il s'agit d'une copie complète, qui copiera le nœud lui-même et tous ses nœuds enfants.

<ul>
        <li>aniu</li>
        <li>se marier</li>
        <li>tom</li>
    </ul>
    <script>
        var ul = document.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); //Copie superficielle var li2 = ul.children[0].cloneNode(true); //Copie approfondie ul.appendChild(li1);
        ul.appendChild(li2);
    </script>