HTML DOM firstChild- Eigenschaft
Beispiel
Rufen Sie den HTML-Inhalt des ersten untergeordneten Knotens eines <ul>-Elements ab:
var x = document.getElementById("myList").firstChild.innerHTML;
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die firstChild-Eigenschaft gibt den ersten untergeordneten Knoten des angegebenen Knotens als Node-Objekt zurück.
Der Unterschied zwischen dieser Eigenschaft und firstElementChild besteht darin, dass firstChild den ersten untergeordneten Knoten als Elementknoten, Textknoten oder Kommentarknoten zurückgibt (je nachdem, welcher der erste ist), während firstElementChild den ersten untergeordneten Knoten als Elementknoten zurückgibt (ignoriert text und Kommentarknoten).
Hinweis: Leerzeichen innerhalb von Elementen werden als Text und Text als Knoten betrachtet (siehe "Weitere Beispiele").
Diese Eigenschaft ist schreibgeschützt.
Tipp: Verwenden Sie die .childNodes- Elementeigenschaft , um einen beliebigen untergeordneten Knoten eines angegebenen Knotens zurückzugeben. childNodes[0] erzeugt dasselbe Ergebnis wie firstChild.
Tipp: Um den letzten untergeordneten Knoten eines angegebenen Knotens zurückzugeben, verwenden Sie die lastChild- Eigenschaft.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Syntax
node.firstChild
Technische Details
| Rückgabewert: | Ein Node-Objekt, das das erste untergeordnete Element eines Knotens darstellt, oder null , wenn es keine untergeordneten Knoten gibt |
|---|---|
| DOM-Version | Knotenobjekt der Kernebene 1 |
Mehr Beispiele
Beispiel
In diesem Beispiel demonstrieren wir, wie Leerzeichen diese Eigenschaft beeinträchtigen können.
Rufen Sie den Knotennamen des ersten untergeordneten Knotens eines <div>-Elements ab:
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Beispiel
Wenn wir jedoch die Leerzeichen aus der Quelle entfernen, gibt es keine #text-Knoten in <div>, wodurch das <p>-Element zum ersten untergeordneten Knoten wird:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Beispiel
Rufen Sie den Text des ersten untergeordneten Knotens eines <select>-Elements ab:
var x = document.getElementById("mySelect").firstChild.text;
Verwandte Seiten
HTML-DOM-Referenz: node. lastChild-Eigenschaft
HTML-DOM-Referenz: node. childNodes-Eigenschaft
HTML-DOM-Referenz: node. parentNode-Eigenschaft
HTML-DOM-Referenz: node. nextGeschwistereigentum
HTML-DOM-Referenz: node. vorherigesGeschwistereigentum
HTML-DOM-Referenz: node. nodeName-Eigenschaft