HTML DOM Element children-egenskapen

Definition och användning

children egenskapen returnerar en samling av elementunderdelar.

children egenskapen returnerar ett HTMLCollection-objekt.

Se också:

firstElementChild-egenskapen

lastElementChild-egenskapen

nextElementSibling-egenskapen

previousElementSibling-egenskapen

childElementCount-egenskapen

childNodes-egenskapen

HTML-noder och element

i HTML DOMi (Dokumentobjektmodellen), är en HTML-dokument en samling av noder som har (eller inte har) underdelar.

nodbetyder elementdelar, textdelar och kommentarndelar.

elementmellanslag mellan dem är också textdelar.

medan element bara är elementdelar.

underdelar och underkomponenter

childNodes återgerunderdelar(elementdelar, textdelar och kommentarndelar).

children återgerunderkomponentersnarare än text- och kommentarndelar).

systern och elementkompisar

kompisarär "syskon" och "systern".

kompisarär noder som har samma föräldernode (i samma childNodes listan）.

elementkompisarär element som har samma föräldernode (i samma children listan）.

Exempel

Exempel 1

Hämta samlingen av underlement för <body>-elementet:

const collection = document.body.children;

Prova själv

Exempel 2

Hur många underlement har "myDIV":

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

Prova själv

Exempel 3

Ändra bakgrunden för den andra underdelen av "myDIV":

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

Prova själv

Exempel 4

Hämta texten från den tredje underdelen av <select>-elementet (index 2):

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

Prova själv

Exempel 5

Genomgå alla underlement av <body> och ändra deras bakgrund:

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

Prova själv

Syntax

element.children

Returvärde

Typ Beskrivning
Objekt

HTMLCollection-objekt.

En samling av elementnoder.

Element sorteras efter deras ordning i dokumentet.

Webbläsarstöd

element.children är en DOM Level 1 (1998)-funktion.

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