Collection de points de connaissances JavaScript : obtention d'éléments et de nœuds

[Recommandations associées : didacticiel vidéo javascript, front-end Web]

Obtenez l'élément

• via l'ID ( getElementById )
• via l'attribut name ( getElementsByName )
• via le nom de la balise ( getElementsByTagName )
• via le nom de la classe ( getElementsByClassName )
• Obtenez un élément via le sélecteur ( querySelector )
• via le sélecteur Un groupe d'éléments ( querySelectorAll )
• méthode pour obtenir du HTML ( document.documentElement )
• méthode pour obtenir le corps ( document.body )

1. Obtenir par ID (getElementById)

// 1 Obtenir le nœud de l'élément // par identifiant (find éléments par identifiant, sensible à la casse, s'il y a plusieurs identifiants, seul le premier sera trouvé)
    document.getElementById('p1');

• Le contexte doit être un document.
• Les paramètres doivent être passés. Les paramètres sont de type chaîne et sont utilisés pour obtenir l'identifiant de l'élément.
• La valeur de retour n'obtient qu'un seul élément et renvoie null s'il n'est pas trouvé.

2. Rechercher des éléments par nom de classe (getElementsByClassName)

// Recherchez des éléments par nom de classe. Séparez plusieurs noms de classe par des espaces pour obtenir une HTMLCollection (une collection d'éléments avec un attribut de longueur, et vous pouvez accéder à un élément à l'intérieur via le numéro d'index. )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• Le paramètre est le nom de classe de l'élément.
• La valeur de retour est un tableau de type tableau. S'il n'est pas trouvé, un tableau vide est renvoyé

3. Via l'attribut name (getElementsByName)

// Recherchez dans l'attribut name et renvoyez une NodeList (une collection de nœuds avec un attribut length qui peut accessible via le numéro d'index)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. Par nom de balise (getElementsByTagName)

// Rechercher des éléments par nom de balise et renvoyer une HTMLCollection
    document.getElementsByTagName('p');

• Le paramètre consiste à obtenir l'attribut de nom de balise de l'élément, qui n'est pas sensible à la casse.
• La valeur de retour est un tableau de classe. S'il n'est pas trouvé, un tableau vide est renvoyé.

5. Récupère un élément via le sélecteur (querySelector)

Le paramètre document.querySelector('.animated')

• est le sélecteur, tel que : "p. Nom de classe".
• Renvoie un seul nœud, s'il y a plusieurs éléments correspondants, renvoie les

6 premiers. Obtenez un ensemble d'éléments via le sélecteur (querySelectorAll)

document.querySelector('.animated')

• La valeur de retour est un tableau de classes

pour obtenir le nœud

dans le Document Object Model (DOM) ), chaque nœud est un objet. Les nœuds DOM ont trois attributs importants

: 1. nodeName : le nom du nœud

2. nodeValue : la valeur du nœud

3. nodeType : le type du nœud

1. attribut nodeName : le nom du nœud, qui est en lecture seule .

• Le nodeName du nœud d'élément est le même que le nom de l'étiquette.
• Le nodeName du nœud d'attribut est toujours le nom de l'attribut
• . Le nodeName du nœud de texte est toujours #text
• Le nodeName du nœud de document est toujours #document

. . nodeValue Attribut : La valeur du nœud.

• La valeur nodeValue du nœud d'élément est indéfinie ou nulle.
• Le nœud de texte La valeur de nœud est l'
• attribut de texte du nœud. La valeur de l'attribut nodeValue est la valeur de l'attribut

. du nœud, qui est en lecture seule. Les types de nœuds suivants couramment utilisés :

• Type d'élément Type de nœud Élément
• 1
• Attribut 2
• Texte 3 L'espace renvoie également 3
• Commentaire 8
• Document 9

Créez un nœud :

1. Créez un nœud : createElement('')

// Créez un élément. Il est simplement créé et non ajouté au code HTML. Il doit être utilisé conjointement avec appendChild = document.createElement('. p');
    elem.id = 'test';
    elem.style = 'couleur : rouge' ;
    elem.innerHTML = 'Je suis un nœud nouvellement créé';
    document.body.appendChild(elem);

2. Insérer un nœud :

• l'utilisation de appendChild () est : parent.appendChild(child)
• ajoutera le nœud enfant à la fin du parent.
• Si le nœud enfant existe à l'origine, le nœud d'origine sera. supprimé. Ajoutez le nouveau nœud à la fin, mais l'événement restera

var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);

2-1. Insérer un nœud :

• l'utilisation de insertBefore() est parent.insertBefore(newNode,refNode);

var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

Supprimer le nœud

1. Supprimer le nœud :

• l'utilisation de RemoveChild est : parent.removeChild(child)
• Si vous supprimez un nœud enfant qui n'est pas un élément parent, une erreur sera signalée

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Nœud clone

1. Nœud clone : parent.cloneNode() false ou true

• Nœud clone (doit accepter un paramètre pour indiquer s'il faut copier l'élément)

// Nœud clone (doit accepter un paramètre) pour indiquer s'il faut copier l'élément) élément)
    var form = document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

Remplacer le nœud

1. Remplacer la méthode du nœud node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

de la boîte de fragments de document

• : Lors de l'ajout d'un grand nombre de nœuds à un document, il sera très lent s'il est ajouté un par un. Dans ce cas, vous pouvez utiliser des fragments de document pour. ajoutez-les au document immédiatement.
Syntaxe
•  :
• document. createDocumentFragment()

;
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        pour(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+'ième nœud enfant';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('Temps consommé :'+(Date.now()-start)+'milliseconds'); // 63 millisecondes})();

[Recommandations associées : didacticiels vidéo javascript, interface Web]

Les éléments ci-dessus sont Points de connaissance JavaScript Organisez les détails de l'obtention des éléments et des nœuds. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le réseau de code source !