HTML DOM Element children-ominaisuus

Määrittely ja käyttö

children Ominaisuus palauttaa elementin alisolujen joukon.

children Ominaisuus palauttaa HTMLCollection-objektin.

Lisätietoja:

firstElementChild-ominaisuus

lastElementChild-ominaisuus

nextElementSibling-ominaisuus

previousElementSibling-ominaisuus

childElementCount-ominaisuus

childNodes-ominaisuus

HTML-solut ja elementit

HTML HTML DOM((Dokumentiomalli)ssä HTML-dokumentti on solmujoukko, jolla on (tai ei ole) alisoluja.

SolmuViittaa elementtisolmuun, tekstisolmuun ja kommenttisolmuun.

ElementtiVälit spaceja ovat myös tekstisolmut.

Ja elementti on vain elementtisolut.

Alisolut ja alisolut

childNodes PalauttaaAlisolut((elementtisolut, tekstisolmut ja kommenttisolut)).

children PalauttaaAlisolut((ei teksti- tai kommentin solmuja)).

Sisarukset ja elementtisisarukset

sisarOn 'veli' ja 'sisko'.

sisaron solut, joilla on sama isä solu (samassa childNodes listassa).

elementti sisaron elementit, joilla on sama isäelementti (samassa children listassa).

Esimerkki

Esimerkki 1

Hanki <body>-elementin al子弟 elementtien kokoelma:

const collection = document.body.children;

Kokeile itse

Esimerkki 2

"myDIV" -elementillä on kuinka monta al子弟 elementtiä:

let count = document.getElementById("myDIV").children.length;

Kokeile itse

Esimerkki 3

Muuta "myDIV" -elementin toisen al子弟 elementin taustaväriä:

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

Kokeile itse

Esimerkki 4

Hanki <select>-elementin kolmas al子弟 elementin teksti (indeksi 2):

const collection = document.getElementById("mySelect").children[2].text;

Kokeile itse

Esimerkki 5

Läpikäy kaikki <body>-elementin al子弟元素 ja muuta niiden taustaväriä:

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Kokeile itse

Syntaksi

element.children

Palautusarvo

Tyyppi Kuvaus
Objekti

HTMLCollection-objekti.

Elementin solujen kokoelma.

Elementit järjestetään niiden esiintymisjärjestyksen mukaan dokumentissa.

Selaimen tuki

element.children 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