HTML DOM Element firstChild-ominaisuus

Määritelmä ja käyttö

firstChild Ominaisuus palauttaa määritellyn solmun ensimmäisen lapsen Node-objektina.

firstChild Ominaisuus on lukuinen.

firstChild Ominaisuus on childNodes[0] Sama.

Huomaa

firstChild Palauta ensimmäinen lapsisolmu: elementti, teksti tai kommentti.

Elementtien väliset välilyönnit ovat myös tekstisolmuja.

Vaihtoehto:

firstElementChild-ominaisuus - firstElementChild Ominaisuus palauttaa ensimmäisen lapsen elementin (ohittaen teksti- ja kommenttisolut).

Katso myös:

childNodes-ominaisuus

lastChild-ominaisuus

nextSibling-ominaisuus

previousSibling-ominaisuus

Solmun ominaisuudet

parentNode-ominaisuus

nodeName-ominaisuus

nodeType-ominaisuus

nodeValue-ominaisuus

Esimerkki

Esimerkki 1

Palauta <ul> -elementin ensimmäisen lapsen HTML-sisältö:

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

Kokeile itse

Esimerkki 2

Hanki <select> -elementin ensimmäisen lapsen solmun teksti:

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

Kokeile itse

Esimerkki 3

Tämä esimerkki osoittaa välilyönnien häiritsevän vaikutuksen.

Yritä saada "myDIV" -elementin ensimmäisen lapsen solmun nimi:

<div id="myDIV">
  <p>Näyttää siltä, että ensimmäinen lapsi</p>
  <p>Näyttää siltä, että viimeinen lapsi</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Kokeile itse

Esimerkki 4

Mutta jos poistat välit lähteestä, "myDIV" ei sisällä #text-solmua:

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

Kokeile itse

HTML-solmut ja -elementit

HTML-dokumentti HTML DOMDokumenttiobjekti malli (DOM) - HTML-dokumentti on solmun joukko, jolla on (tai ei ole) lapsia.

SolmuOn elementtisolmu, tekstisolmu ja kommenttisolmu. HTML-dokumentti on solmun joukko, jolla on (tai ei ole) lapsia.

ElementtiElementtien väliset tyhjät välit ovat myös tekstisolmuja.

Elementti on vain elementtisolmu.

Lapsisolmut ja lapsielementit

childNodes PalauttaaLapsisolmuElementti, tekstisolmu ja kommenttisolmu. Kaikki lapsisolmut.

children PalauttaaLapsielementtiEi palauteta tekstiä tai kommentteja.

firstChild ja firstElementChild

firstChild Palauttaa ensimmäisenLapsisolmuElementti, tekstisolmu tai kommenttisolmu. Elementtien väliset tyhjät välit ovat myös tekstisolmuja.

firstElementChild Palauttaa ensimmäisenLapsielementtiEi palauteta tekstisolmuja tai kommenttisolmuja.

lastChild ja lastElementChild

lastChild Palauttaa viimeisenLapsisolmuElementti, tekstisolmu tai kommenttisolmu. Elementtien väliset tyhjät välit ovat myös tekstisolmuja.

lastElementChild Palauttaa viimeisenLapsielementtiEi palauteta tekstisolmuja tai kommenttisolmuja.

Syntaksi

element.firstChild

tai

node.firstChild

Palautusarvo

Tyyppi Kuvaus
Solmu

Solmun ensimmäinen lapsisolmu.

Jos ei ole lapsia, palauttaa null.

Selaimen tuki

element.firstChild Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

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