Sammlung von JavaScript-Wissenspunkten: Abrufen von Elementen und Knoten

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Holen Sie sich das Element

• über die ID ( getElementById ),
• über das Namensattribut ( getElementsByName ),
• über den Tag-Namen ( getElementsByTagName ),
• über den Klassennamen ( getElementsByClassName )
• . Holen Sie sich ein Element über den Selektor ( querySelector )
• über den Selektor Eine Gruppe von Elementen ( querySelectorAll )
• Methode zum Abrufen von HTML ( document.documentElement )
• Methode zum Abrufen des Körpers ( document.body )

1. Abrufen nach ID (getElementById)

// 1 Abrufen des Elementknotens // nach ID (find Elemente nach ID, Groß- und Kleinschreibung beachten, wenn mehrere IDs vorhanden sind, wird nur die erste gefunden)
    document.getElementById('p1');

• Der Kontext muss ein Dokument sein.
• Parameter müssen übergeben werden. 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. Elemente nach Klassennamen suchen (getElementsByClassName)

// Suchen Sie nach Elementen nach Klassennamen, um eine HTMLCollection (eine Sammlung von Elementen mit einem Längenattribut) zu erhalten, auf die Sie über die Indexnummer zugreifen können )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• Der Parameter ist der Klassenname des Elements.
• Der Rückgabewert ist ein Array-ähnliches Array. Wenn er nicht gefunden wird, wird ein leeres Array zurückgegeben

3. Über das Namensattribut (getElementsByName)

// Durchsuchen Sie das Namensattribut und geben Sie eine NodeList zurück (eine Knotensammlung mit einem Längenattribut, das kann auf die über die Indexnummer zugegriffen werden kann)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. Nach Tag-Namen (getElementsByTagName)

// Elemente nach Tag-Namen suchen und eine HTMLCollection zurückgeben
    document.getElementsByTagName('p');

• Der Parameter dient zum Abrufen des Tag-Namensattributs des Elements, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird.
• 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).

Der Parameter document.querySelector('.animated')

• ist der Selektor, wie zum Beispiel: "p. Klassenname".
• Geben Sie einen einzelnen Knoten zurück. Wenn mehrere übereinstimmende Elemente vorhanden sind, geben Sie die ersten

6 zurück. Rufen Sie eine Reihe von Elementen über den Selektor (querySelectorAll) ab.

document.querySelector('.animated')

• Der Rückgabewert ist ein Klassenarray

zum Abrufen des Knotens

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

: 1. nodeName: der Name des Knotens

2. nodeValue: der Wert des Knotens

3. nodeType: der Typ des Knotens

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

ist

• derselbe wie der Labelname.
• Der
Knotenname
• des Textknotens
• ist immer #document

. nodeValue-Attribut: Der

null

• .
• Der
• nodeValue ist der Wert des Attributs

des Knotens, der schreibgeschützt ist. Die folgenden häufig verwendeten Knotentypen:

• Elementtyp Knotentyp
• Element 1
• Attribut 2
• Text 3 Leerzeichen gibt auch 3
• Kommentar 8
• Dokument 9
zurück

Erstellen Sie einen Knoten:

1. Erstellen Sie einen Knoten: createElement('')

// Erstellt ein Element. Es wird nur erstellt und nicht zum HTML hinzugefügt. Es muss in Verbindung mit var elem = document.createElement(' verwendet werden. P');
    elem.id = 'test';
    elem.style = 'Farbe: rot';
    elem.innerHTML = 'Ich bin ein neu erstellter Knoten';
    document.body.appendChild(elem);

2. Knoten einfügen: appendChild ()

• Verwendung ist: parent.appendChild(child)
• fügt den untergeordneten Knoten am Ende des übergeordneten Knotens
• hinzu Den neuen Knoten am Ende hinzufügen, aber das Ereignis bleibt bestehen.

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

2-1. Insert-Knoten: insertBefore()

• Verwendung ist parent.insertBefore(newNode,refNode);

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

Knoten löschen

1. Knoten löschen: RemoveChild

• -Verwendung ist: parent.removeChild(child)
• Wenn Sie einen untergeordneten Knoten löschen, der kein übergeordnetes Element ist, wird ein Fehler gemeldet

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

Knoten klonen

1. Knoten klonen: parent.cloneNode() false oder true

• Knoten klonen (muss einen Parameter akzeptieren, um anzugeben, ob das Element kopiert werden soll)

// Knoten klonen (muss einen Parameter akzeptieren um anzugeben, ob das Element kopiert werden soll) Element)
    var form = document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

Knoten ersetzen

1. Knotenmethode ersetzen node.replace(new,old)

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

der Dokumentfragmentbox

• : Wenn Sie einem Dokument eine große Anzahl von Knoten hinzufügen, ist es sehr langsam, wenn Sie Dokumentfragmente verwenden
Fügen
• Sie
• sie sofort zum Dokument hinzu.
• Syntax: createDocumentFragment()

;
    {
        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+'ter untergeordneter Knoten';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('Zeitaufwändig:'+(Date.now()-start)+'milliseconds'); // 63 Millisekunden})();

[Verwandte Empfehlungen: Javascript-Video-Tutorials, Web-Frontend]

Die oben genannten sind JavaScript-Wissenspunkte Organisieren Sie die Details zum Abrufen von Elementen und Knoten. Weitere Informationen finden Sie in anderen verwandten Artikeln im Quellcode-Netzwerk!