Extrahieren Sie das erste untergeordnete Element eines Elements in JavaScript

1. Extrahieren Sie das erste Kind eines Elements in JavaScript mit Node.firstChild
2. Extrahieren Sie das erste Kind eines Elements in JavaScript mit Node.childNodes
3. Extrahieren Sie das erste Kind eines Elements in JavaScript mit Element.children

Im heutigen Beitrag lernen wir, das erste untergeordnete Element eines Elements in JavaScript zu extrahieren.

Extrahieren Sie das erste Kind eines Elements in JavaScript mit Node.firstChild

Node.firstChild gibt das erste Kind des Knotens im Baum zurück, oder null, wenn der Knoten keine Kinder hat. Dies ist die schreibgeschützte firstChild-Eigenschaft der Node-Schnittstelle.

Syntax:

Node.firstChild

Zum Beispiel haben wir ein Absatz-Tag, das das Wort Hello World! anzeigt. Text darin in einem anderen span-Tag.

HTML Quelltext:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript-Code:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

Ausgang:

"#text"

Wenn Sie den obigen Code in einem beliebigen Browser ausführen, zeigt die Konsole des Browsers #text an. Dies liegt daran, dass standardmäßig ein Textknoten eingefügt wird, um Leerraum zwischen dem Tag für das Ende des Absatzes und den Tags für das Öffnen der Spanne beizubehalten.

Jeder Leerraum erstellt automatisch einen #text-Knoten, von einem einzelnen Leerzeichen bis hin zu mehreren Leerzeichen, Zeilenumbrüchen, Tabulatoren usw.

Um das Problem mit dem Textknoten zu vermeiden, können Sie entweder den Leerraum aus der Quelle entfernen oder Element.firstElementChild verwenden, um nur den ersten Elementknoten zurückzugeben.

Weitere Informationen zum firstChild finden Sie in der Dokumentation hier.

Extrahieren Sie das erste Kind eines Elements in JavaScript mit Node.childNodes

Node.childNodes gibt eine aktive NodeList der untergeordneten Knoten des angegebenen Elements zurück, wobei der Index 0 dem ersten untergeordneten Knoten zugewiesen ist. Dies ist die schreibgeschützte childNodes-Eigenschaft der Node-Schnittstelle.

Untergeordnete Knoten enthalten Elemente, Texte und Kommentare.

Die Elemente der Knotensammlung sind Objekte, keine Zeichenfolgen. Um Daten von Knotenobjekten abzurufen, verwenden Sie deren Eigenschaften.

Um beispielsweise den Namen des ersten untergeordneten Knotens zu erhalten, können Sie elementNodeReference.childNodes[0].nodeName verwenden.

ChildNodes enthält standardmäßig alle untergeordneten Knoten, sowohl Elemente als auch Nicht-Elemente. Es gibt eine aktive NodeList zurück, die die Kinder des Knotens enthält.

Weitere Informationen zu childNodes finden Sie in der Dokumentation hier.

Zum Beispiel haben wir ein Absatz-Tag, das Hello World! anzeigt. Text darin in einem anderen span-Tag.

HTML Quelltext:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript-Code:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

Ausgang:

"#text"

Ähnlich wie im vorherigen Abschnitt wird standardmäßig ein Textknoten eingefügt, um Leerraum zwischen dem Ende des Absatz-Tags und dem Anfang der span-Tags zu halten.

Extrahieren Sie das erste Kind eines Elements in JavaScript mit Element.children

Die Eigenschaft Element.children gibt eine Live-HTML-Sammlung zurück, die alle Kinder des Elements enthält, für das sie aufgerufen wurde.

Der einzige Unterschied zwischen Element.children und Node.childNodes besteht darin, dass Element.children nur Elementknoten enthält, während Node.childNodes alle untergeordneten Knoten enthält, einschließlich Nicht-Elementknoten wie Text und Kommentare.

Eine HTML-Sammlung ist eine aktive, geordnete Sammlung der untergeordneten DOM-Elemente des Knotens. Sie können auf jeden untergeordneten Knoten der Sammlung mit der Methode item() zugreifen.

Weitere Informationen zu den Kindern finden Sie in der Dokumentation hier.

Zum Beispiel haben wir ein Absatz-Tag, das das Wort Hello World! anzeigt. Text darin in einem anderen span-Tag.

HTML Quelltext:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript-Code:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

Ausgang:

"Hello World!"

Wenn Sie den obigen Code in einem beliebigen Browser ausführen, zeigt die Konsole des Browsers "Hello World!" an. Dies liegt daran, dass diese Eigenschaft nur DOM-Elemente des aufrufenden Knotens zurückgibt.