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 (

) Get ein Element nach Klassenname (GetElements byclassName)

Get ein Element nach Selektor (

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

  Nach dem Login kopieren
• 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);

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

Nach dem Login kopieren

.

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

Nach dem Login kopieren

. 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

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

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