HTML DOM firstKindereigenschap
Voorbeeld
Haal de HTML-inhoud op van het eerste onderliggende knooppunt van een <ul>-element:
var x = document.getElementById("myList").firstChild.innerHTML;
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De eigenschap firstChild retourneert het eerste onderliggende knooppunt van het opgegeven knooppunt als een Node-object.
Het verschil tussen deze eigenschap en firstElementChild , is dat firstChild het eerste onderliggende knooppunt retourneert als een elementknooppunt, een tekstknooppunt of een commentaarknooppunt (afhankelijk van welke de eerste is), terwijl firstElementChild het eerste onderliggende knooppunt retourneert als een elementknooppunt (negeert tekst en commentaarknooppunten).
Opmerking: witruimte binnen elementen wordt beschouwd als tekst en tekst wordt beschouwd als knooppunten (zie "Meer voorbeelden").
Deze eigenschap is alleen-lezen.
Tip: gebruik de eigenschap .childNodes van het element om een willekeurig onderliggend knooppunt van een opgegeven knooppunt te retourneren. childNodes[0] zal hetzelfde resultaat opleveren als firstChild.
Tip: Gebruik de eigenschap lastChild om het laatste onderliggende knooppunt van een opgegeven knooppunt te retourneren .
Browserondersteuning
| Property | |||||
|---|---|---|---|---|---|
| firstChild | Yes | Yes | Yes | Yes | Yes |
Syntaxis
node.firstChild
Technische details
| Winstwaarde: | Een knooppuntobject, dat het eerste onderliggende knooppunt van een knooppunt vertegenwoordigt, of null als er geen onderliggende knooppunten zijn |
|---|---|
| DOM-versie | Kernniveau 1 knooppuntobject |
Meer voorbeelden
Voorbeeld
In dit voorbeeld laten we zien hoe witruimte deze eigenschap kan verstoren.
Haal de knooppuntnaam op van het eerste onderliggende knooppunt van een <div>-element:
<!--
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>
Voorbeeld
Als we echter de witruimte uit de bron verwijderen, zijn er geen #text-knooppunten in <div>, waardoor het <p>-element het eerste onderliggende knooppunt wordt:
<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>
Voorbeeld
Haal de tekst op van het eerste onderliggende knooppunt van een <select> element:
var x = document.getElementById("mySelect").firstChild.text;
Gerelateerde pagina's
HTML DOM-referentie: node. laatste kinderbezit
HTML DOM-referentie: node. childNodes-eigenschap
HTML DOM-referentie: node. parentNode-eigenschap
HTML DOM-referentie: node. volgende eigendom van broers en zussen
HTML DOM-referentie: node. voorgaand eigendom van broers en zussen
HTML DOM-referentie: node. nodeName eigenschap