Sammlung von JavaScript-Wissenspunkten: Abrufen von Elementen und Knoten

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript und stellt hauptsächlich verwandte Inhalte zum Abrufen von Elementen und Knoten vor, einschließlich des Abrufens von Elementen über ID, Klassenname, Name, Tag-Name, Erstellung, Löschung und Klonen. Werfen wir einen Blick auf Probleme wie z als Knoten usw. Ich hoffe, dass es für alle hilfreich sein wird. 🔜

)

Von Tag -Name (

GetElementsByTagName

) Get ein Element nach Klassenname (GetElements byclassName)

Get ein Element nach Selektor (

QuerySelector

)
• get HTML-Methode abrufen ( document.documentElement
)
• Methode zum Abrufen des Textkörpers (document.body
)
1. Nach ID abrufen (getElementById)

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

• Der Kontext muss Dokument sein.
Sie müssen Parameter übergeben. Die Parameter sind vom Typ String und werden verwendet, um die ID des Elements zu erhalten.
• Der Rückgabewert erhält nur ein Element und gibt null zurück, wenn es nicht gefunden wird.
• 2. Nach Klassenname (getElementsByClassName)

    // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

Der Parameter ist der Klassenname des Elements.

Der Rückgabewert ähnelt einem Array. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben.

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

.

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

. 4. Über den Tag-Namen (getElementsByTagName).

Der Parameter dient zum Abrufen der Elemente. Das Tag-Name-Attribut unterscheidet nicht zwischen Groß- und Kleinschreibung.

Der Rückgabewert ist ein Klassenarray. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben
5. Holen Sie sich ein Element über den Selektor (querySelector)

document.querySelector('.animated')

Der Parameter ist der Selektor, wie zum Beispiel: „p .Klassenname". Einen einzelnen Knoten zurückgeben, wenn es mehrere übereinstimmende Elemente gibt, das erste zurückgeben

• 6. Holen Sie sich eine Reihe von Elementen über den Selektor (querySelectorAll)

document.querySelector('.animated')

Der Rückgabewert ist ein Array-ähnlicher

Holen Sie sich den Knoten

Im Document Object Model (DOM) ist jeder Knoten ein Objekt. DOM-Knoten haben drei wichtige Attribute

• 1. Knotenname: Name des Knotens

2. Knotenwert: Der Wert des Knotens

• 3. Knotentyp: Knotentypen

1, nodeName-Attribut: Der Name des Knotens, der schreibgeschützt ist.

• Der Knotenname des Elementknotens ist derselbe wie der Etikettenname.

Der Knotenname des Attributknotens ist der Name des Attributs.

Der Knotenname des Textknotens ist immer #text.

Der Knotenname des Dokuments Knoten ist immer #Dokument 2. nodeValue-Attribut: Der Wert des Knotens

Der Knotenwert des Elementknotens ist undefiniert oder nullDer Knotenwert des Textknotens ist der Text selbst

Der Knotenwert von Der Attributknoten ist der Wert des Attributs 3. nodeType-Attribut: Der Typ des Knotens, es ist nur Lesen. Die folgenden häufig verwendeten Knotentypen:

Elementtyp Knotentyp

Element 1
• Attribut 2
• Text 3 Leerzeichen geben auch 3 zurück
• Kommentar 8
• Dokument. 9

Erstellen Knoten:
• 1. Knoten erstellen: createElement('')

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

2. Knoten einfügen: appendChild ()

Die Verwendung ist: parent.appendChild(child)
• fügt den untergeordneten Knoten dem übergeordneten Knoten hinzu der letzte
• Wenn der untergeordnete Knoten bereits vorhanden ist, wird der ursprüngliche Knoten entfernt und der neue Knoten am Ende hinzugefügt, aber das Ereignis bleibt bestehen

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

2-1 Knoten einfügen: 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前端】

Das obige ist der detaillierte Inhalt vonSammlung von JavaScript-Wissenspunkten: Abrufen von Elementen und Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!