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.

Le paramètre consiste à obtenir les éléments. L'attribut de nom de balise n'est pas sensible à la casse.

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

5. Obtenez un élément via le sélecteur (querySelector)

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

Le paramètre est le sélecteur, tel que : "p .nomClasse".

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

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

document.querySelector('.animated')

La valeur de retour est un tableau

• .
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 .

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 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

2. Attribut nodeValue : La valeur du nœud

La valeur nœud du nœud élément est indéfinie ou nulle

• 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

3. Attribut nodeType : Le type du nœud, il s'agit uniquement de Lecture. Les types de nœuds couramment utilisés suivants :

Type d'élément Type de nœud

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

Cre nœud mangé :

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

document.querySelector('.animated')

2. Insérer un nœud : appendChild ()

L'utilisation est la suivante : parent.appendChild(child)

• 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);

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

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

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

  删除节点

1.删除节点：removeChild

• 用法是：parent.removeChild(child) 
• 如果删除的不是父元素的子节点会报错

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

   克隆节点

1.克隆节点：parent.cloneNode() false 或者true

• 克隆节点（需要接受一个参数来表示是否复制元素）

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

   替换节点

1.替换节点 方法node.replace(new,old) 

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

  文档碎片框 

• 作用：当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
• 语法：document.createDocumentFragment()；
• 承载节点

 (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毫秒
    })();

【相关推荐：javascript视频教程、web前端】

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!