HTML DOM Element children-eigenschap

Definitie en gebruik

children Eigenschap retourneert een verzameling van onderliggende elementen van het element.

children Eigenschap retourneert een HTMLCollection-object.

Zie ook:

firstElementChild-eigenschap

lastElementChild-eigenschap

nextElementSibling-eigenschap

previousElementSibling-eigenschap

childElementCount-eigenschap

childNodes-eigenschap

HTML-knooppunten en elementen

in HTML DOMin (Document Object Model), een HTML-document is een verzameling knopen die (of niet) onderliggende knopen hebben.

Knoopverwijst naar elementknopen, tekstknopen en annotatieknopen.

ElementDe witruimte tussen deze is ook een tekstknoop.

en element is alleen een elementknoop.

Onderliggende knopen en onderliggende elementen

childNodes terug te kerenOnderliggende knopen(elementknopen, tekstknopen en annotatieknopen).

children terug te kerenOnderliggende elementenin plaats van tekst- en annotatieknopen).

Gemeenschappelijke elementen

zussenZussen en broers.

zussenzijn knopen die dezelfde ouder hebben (in dezelfde childNodes in de lijst）。

element zussenzijn elementen die dezelfde ouder hebben (in dezelfde children in de lijst）。

Voorbeeld

Voorbeeld 1

Haal de verzameling van subelementen van het <body>-element op:

const collection = document.body.children;

Probeer het zelf

Voorbeeld 2

Hoeveel subelementen heeft "myDIV":

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

Probeer het zelf

Voorbeeld 3

Verander de achtergrond van de tweede subelement van "myDIV":

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

Probeer het zelf

Voorbeeld 4

Haal de tekst van de derde subelement van het <select>-element (index 2) op:

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

Probeer het zelf

Voorbeeld 5

Blaat alle subelementen van <body> af en verander hun achtergrond:

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

Probeer het zelf

Syntax

element.children

Retourwaarde

Type Beschrijving
Object

HTMLCollection object.

Verzameling van elementknopen.

Elementen worden gesorteerd op de volgorde waarin ze in het document verschijnen.

Browserondersteuning

element.children is een DOM Level 1 (1998) kenmerk.

Alle browsers ondersteunen het volledig:

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