Kursrekommendationer:

HTML DOM Element firstChild-attribut

firstChild Definition och användning

firstChild Attributet returnerar den första barnnoden för den angivna noden som Node-objekt.

firstChild Attributet är skrivskyddat. childNodes[0] Samma.

Observera

firstChild Returnerar den första barnnoden: elementnod, textnod eller kommentarnod.

Mellanslag mellan element är också textnoder.

Alternativ:

firstElementChild-attribut - firstElementChild Attributet returnerar den första barnnoden (ignorerar text- och kommentarnoder).

Se också:

childNodes-attribut

lastChild-attribut

nextSibling-attribut

previousSibling-attribut

Nodattribut

parentNode-attribut

nodeName-attribut

nodeType-attribut

nodeValue-attribut

Exempel

Exempel 1

Returnera HTML-innehållet för den första barnnoden för <ul>-elementet:

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

Prova själv

Exempel 2

Hämta texten från den första barnnoden för <select>-elementet:

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

Prova själv

Exempel 3

Detta exempel visar störningen av mellanslag.

Försök att få namnet på den första barnnoden för "myDIV":

<div id="myDIV">
  <p>Verkar vara första barnet</p>
  <p>Verkar vara sista barnet</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Prova själv

Exempel 4

Men om du tar bort blanksteg från källan, finns det inget #text-objekt i "myDIV":

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

Prova själv

HTML-noder och element

i HTML DOMi (Document Object Model), är HTML-dokument en samling av noder som har (eller inte har) barn.

Nodär elementnoder, textnoder och kommentarnoder.

ElementBlanksteg mellan element är också textnoder.

Element är bara elementnoder.

Underliggande noder och underliggande element

childNodes ReturnerarUnderliggande noder（elementnoder, textnoder och kommentarnoder).

children ReturnerarUnderliggande element（inte text och kommentarnoder).

firstChild och firstElementChild

firstChild Returnerar den förstaUnderliggande noder（elementnoder, textnoder eller kommentarnoder).空白 mellan element är också textnoder.

firstElementChild Returnerar den förstaUnderliggande element（återger inte textnoder och kommentarnoder).

lastChild och lastElementChild

lastChild Returnerar den sistaUnderliggande noder（elementnoder, textnoder eller kommentarnoder).空白 mellan element är också textnoder.

lastElementChild Returnerar den sistaUnderliggande element（återger inte textnoder och kommentarnoder).

Syntaks

element.firstChild

eller

node.firstChild

Returvärde

Typ Beskrivning
Nod

Nodens första barnnod.

Om det inte finns några barn, returneras null.

Webbläsarstöd

element.firstChild är en DOM Level 1 (1998) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd