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

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement du contenu connexe sur l'obtention d'éléments et de nœuds, y compris l'obtention d'éléments via l'identifiant, le nom de classe, le nom, le nom de balise, la création, la suppression et le clonage. Jetons un coup d'œil à des problèmes tels que comme nœuds et ainsi de suite, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo Javascript, front-end Web】

Obtenir des éléments

• Obtenir par ID (getElementById)
• Par attribut de nom (getElementsB yName)
• Par tag name (getElementsByTagName)
• Obtenir un élément par nom de classe (getElementsByClassName)
• Obtenir un élément par sélecteur (querySelector)
• Obtenir un ensemble d'éléments par sélecteur (querySelectorAll)​
• Obtenir la méthode HTML ( document.documentElement)
• Méthode pour obtenir le corps (document.body)

1 Obtenir par ID (getElementById)

// 1 获取元素节点
    // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)
    document.getElementById('p1');

• Le contexte doit être un document.
• Vous devez passer des paramètres. Les paramètres sont de type chaîne et servent à obtenir l'identifiant de l'élément.
• La valeur de retour n'obtient qu'un seul élément et renvoie null si elle n'est pas trouvée.

2. Par nom de classe (getElementsByClassName)

    // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)
    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 semblable à un tableau, si elle n'est pas trouvée, un tableau vide est renvoyé

3 Via l'attribut name (getElementsByName)

 // 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)
   var nm =  document.getElementsByName('c');
    console.log(nm);

4.

• La valeur de retour est un tableau de classe, si elle n'est pas trouvée, un tableau vide est renvoyé

    // 通过标签名查找元素 返回一个HTMLCollection
    document.getElementsByTagName('p');

Copier après la connexion

• Renvoyer un seul nœud, s'il y a plusieurs éléments correspondants, renvoyer le premier

document.querySelector('.animated')

Copier après la connexion

Copier après la connexion

• .
Obtenir le nœud

Dans le modèle objet de document (DOM), chaque nœud est un objet. Les nœuds DOM ont trois attributs importants

1. Nodename : Nom des nœuds

2. NodeValue : La valeur du nœud

3. Nodetype : Types du nœud .

• Le nodeName du nœud d'attribut est le nom de l'attribut
• Le nodeName du nœud de texte est toujours #text
• Le nodeName du document Le nœud est toujours #document

• La valeur nœud du nœud texte est le texte lui-même
• La valeur nœud de le nœud d'attribut est la valeur de l'attribut

• Élément 1
• Attribut 2
• Texte 3 Les espaces renvoient également 3
• Commentaire 8
• Document 9

Cre nœud mangé :

document.querySelector('.animated')

• ajoutera le nœud enfant au parent Après le dernier
• Si le nœud enfant existe déjà, le nœud d'origine sera supprimé et le nouveau nœud sera ajouté à la fin, mais l'événement restera

•  // 创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
      var elem = document.createElement('p');
      elem.id = 'test';
      elem.style = 'color: red';
      elem.innerHTML = '我是新创建的节点';
      document.body.appendChild(elem);

  Copier après la connexion

• 用法是 parent.insertBefore(newNode,refNode);

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

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

  // 克隆节点（需要接受一个参数来表示是否复制元素）
    var form =  document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

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

 (function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = '第'+i+'个子节点';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('耗时：'+(Date.now()-start)+'毫秒'); // 63毫秒
    })();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!