Proprietà children dell'elemento HTML DOM

Definizione e uso

children Proprietà restituisce la raccolta degli elementi figli dell'elemento.

children Proprietà restituisce un oggetto HTMLCollection.

Vedi anche:

Proprietà firstElementChild

Proprietà lastElementChild

Proprietà nextElementSibling

Proprietà previousElementSibling

Proprietà childElementCount

Proprietà childNodes

Nodi HTML e elementi

In HTML DOMIn (Document Object Model), un documento HTML è una raccolta di nodi che possiedono (o non possiedono) nodi figli.

NodoSi riferisce ai nodi di elemento, nodi di testo e nodi di commento.

ElementoGli spazi bianchi tra di loro sono anche nodi di testo.

Mentre l'elemento è solo un nodo di elemento.

Nodo figlio e elemento figlio

childNodes RestituisceNodo figlio(nodi di elemento, nodi di testo e nodi di commento).

children RestituisceElemento figlio(piuttosto che nodi di testo e commenti).

Cognati e cognati degli elementi

fratelloSono 'fratelli' e 'sorelle'.

fratelloè un nodo che ha lo stesso genitore (nel medesimo childNodes elenco).

fratello di elementiè un elemento che ha lo stesso genitore (nel medesimo children elenco).

Esempio

Esempio 1

Esempio 1: Ottieni la raccolta dei figli dell'elemento <body>:

const collection = document.body.children;

Prova da solo

Esempio 2

Quanti figli ha "myDIV":

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

Prova da solo

Esempio 3

Esempio 3: Cambia lo sfondo del secondo figlio di "myDIV":

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

Prova da solo

Esempio 4

Esempio 4: Ottieni il testo del terzo figlio dell'elemento <select> (indice 2):

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

Prova da solo

Esempio 5

Esempio 5: Esegui una scansione di tutti i figli di <body> e cambia il loro sfondo:

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

Prova da solo

Sintassi

element.children

Valore di ritorno

Tipo Descrizione
Oggetto

Oggetto HTMLCollection.

insieme di nodi di elementi.

Gli elementi sono ordinati in base alla loro presenza nel documento.

Supporto del browser

element.children È una caratteristica di DOM Level 1 (1998).

Tutti i browser lo supportano completamente:

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