Aanbevolen cursus:

HTML DOM Element firstChild-eigenschap

firstChild Definitie en gebruik

firstChild Eigenschap retourneert de eerste kind knoop van de gespecificeerde knoop, als Node-object.

firstChild Eigenschap is alleen lezen. childNodes[0] Gelijk.

Opmerking

firstChild Retourneert het eerste kind knoop: elementknoop, tekstknoop of commentaarknoop.

Spaties tussen elementen zijn ook tekstknopen.

Alternatief:

firstElementChild-eigenschap - firstElementChild Eigenschap retourneert het eerste kind element (negeert tekst- en commentaarknopen).

Zie ook:

childNodes-eigenschap

lastChild-eigenschap

nextSibling-eigenschap

previousSibling-eigenschap

Knopen eigenschappen

parentNode-eigenschap

nodeName-eigenschap

nodeType-eigenschap

nodeValue-eigenschap

Voorbeeld

Voorbeeld 1

Geef de HTML-inhoud van het eerste kind van het <ul>-element terug:

document.getElementById("myList").firstChild.innerHTML;

Probeer het zelf

Voorbeeld 2

Verkrijg de tekst van het eerste kind van de <select>-element:

let text = document.getElementById("mySelect").firstChild.text;

Probeer het zelf

Voorbeeld 3

Dit voorbeeld demonstreert de verstorende werking van spaties.

Probeer de naam van het eerste kind van "myDIV" te verkrijgen:

<div id="myDIV">
  <p>Lijkt op eerste kind</p>
  <p>Lijkt op laatste kind</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Probeer het zelf

Voorbeeld 4

Maar als je de spaties verwijdert van de bron, is er geen #text-knoop in "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Probeer het zelf

HTML knopen en elementen

In HTML DOM（Document Object Model）, een HTML-document is een verzameling knopen die (of niet) zonen hebben.

KnooppuntIs een elementknooppunt, tekstknooppunt en aantekeningknooppunt.

ElementDe witruimte tussen elementen is ook een tekstknoop.

Elementen zijn alleen elementknooppunten.

Zoonknooppunten en zoon-elementen

childNodes RetourneertZoonknooppunten（elementknooppunten, tekstknooppunten en aantekeningknooppunten）.

children RetourneertZoon-element（niet tekst- en aantekeningknooppunten）.

firstChild en firstElementChild

firstChild Retourneert de eersteZoonknooppunten（elementknooppunten, tekstknooppunten of aantekeningknooppunten）. De witruimte tussen elementen is ook een tekstknoop.

firstElementChild Retourneert de eersteZoon-element（retourneert geen tekstknopen en aantekeningknopen）.

lastChild en lastElementChild

lastChild Retourneert de laatsteZoonknooppunten（elementknooppunten, tekstknooppunten of aantekeningknooppunten）. De witruimte tussen elementen is ook een tekstknoop.

lastElementChild Retourneert de laatsteZoon-element（retourneert geen tekstknopen en aantekeningknopen）.

Syntax

element.firstChild

of

node.firstChild

Retourneert waarde

Type Beschrijving
Knooppunt

De eerste zoon van het knooppunt.

Retourneert null als er geen kinderen zijn.

Browserondersteuning

element.firstChild is een kenmerk van DOM Level 1 (1998).

Het wordt volledig ondersteund door alle browsers:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning