Anbefalet kursus:

HTML DOM Element firstChild-egenskab

firstChild Definition og brug

firstChild Egenskaben returnerer den første underkomponent af den angivne node som Node-objekt.

firstChild Egenskaben er skrivebeskyttet. childNodes[0] Samme.

Bemærk

firstChild Returnerer den første underkomponent: elementnoden, tekstnoden eller kommentarnden.

Mellemrum mellem elementer er også tekstnoder.

Alternativ løsning:

firstElementChild-egenskab - firstElementChild Egenskaben returnerer den første underkomponent (ignorerer tekst- og kommentarnden)

Se også:

childNodes-egenskab

lastChild-egenskab

nextSibling-egenskab

previousSibling-egenskab

Noder egenskaber

parentNode-egenskab

nodeName-egenskab

nodeType-egenskab

nodeValue-egenskab

Eksempel

Eksempel 1

Returner HTML-indholdet af den første underkomponent af <ul>-elementet:

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

Prøv det selv

Eksempel 2

Få teksten fra den første underkomponent af <select>-elementet:

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

Prøv det selv

Eksempel 3

Dette eksempel viser forstyrrelsen af mellemrum.

Forsøg at få navnet på den første underkomponent af "myDIV":

<div id="myDIV">
  <p>Ser ud som første barn</p>
  <p>Ser ud som sidste barn</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Prøv det selv

Eksempel 4

Men hvis du fjerner mellemrum fra kilden, er der ingen #text-knuder i "myDIV":

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

Prøv det selv

HTML-knuder og elementer

i HTML DOMi (Document Object Model), er en HTML-dokument en samling af noder (eller uden) undernoder.

Nodeer elementknuder, tekstknuder og kommentarknuder.

ElementerMellemrum mellem elementer er også tekstknuder.

Elementer er kun elementknuder.

Underknuder og underelementer

childNodes ReturnererUnderknuder（elementknuder, tekstknuder og kommentarknuder）.

children ReturnererUnderelementer（ikke tekst og kommentarknuder）.

firstChild og firstElementChild

firstChild Returnerer den førsteUnderknuder（elementknuder, tekstknuder eller kommentarknuder）. Mellemrum mellem elementer er også tekstknuder.

firstElementChild Returnerer den førsteUnderelementer（ikke returnerer tekstknuder og kommentarknuder）.

lastChild og lastElementChild

lastChild Returnerer den sidsteUnderknuder（elementknuder, tekstknuder eller kommentarknuder）. Mellemrum mellem elementer er også tekstknuder.

lastElementChild Returnerer den sidsteUnderelementer（ikke returnerer tekstknuder og kommentarknuder）.

Syntaks

element.firstChild

eller

node.firstChild

Returværdi

Type Beskrivelse
Node

Nodens første undernode.

Hvis der ikke er nogen børn, returneres null.

Browserv understøttelse

element.firstChild er en DOM Level 1 (1998) funktion.

Alle browsere understøtter det fuldt ud:

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