Proprietà childNodes dell'Elemento DOM HTML

Definizione e utilizzo

childNodes L'attributo restituisce la raccolta dei nodi figli dell'elemento (elenco).

childNodes L'attributo restituisce un oggetto NodeList.

childNodes L'attributo è di sola lettura.

childNodes[0] Uguale a firstChild.

Suggerimento

childNodes Restituisce il nodo: nodo di elemento, nodo di testo e nodo di commento.

Gli spazi tra gli elementi sono anche nodi di testo.

Soluzione alternativa:

Proprietà children - children L'attributo restituisce l'elemento figlio (ignora il testo e i commenti).

Si prega di vedere anche:

Proprietà firstChild

Proprietà lastChild

Proprietà nextSibling

Proprietà previousSibling

Metodo hasChildNodes()

Proprietà del nodo

Attributo parentNode

Attributo nodeName

Proprietà nodeType

Proprietà nodeValue

Nodi HTML e elementi

In HTML DOM(Document Object Model) in cui l'HTML documento è una raccolta di nodi (o senza) che hanno (o non hanno) figli.

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

ElementoSpazi bianchi tra elementi 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(non nodi di testo e commenti).

Gemello e elemento gemello

Gemelloè "fratello" e "sorella".

GemelloSono nodi che condividono lo stesso genitore (nello stesso childNodes della lista).

Elemento gemelloSono elementi che condividono lo stesso genitore (nello stesso children della lista).

Esempio

Esempio 1

Ottieni i figli dell'elemento <body>:

const nodeList = document.body.childNodes;

Prova tu stesso

Esempio 2

Ottieni il numero di figli dell'elemento "myDIV":

let numb = document.getElementById("myDIV").childNodes.length;

Prova tu stesso

Esempio 3

Cambia il colore di sfondo del secondo figlio:

element.childNodes[1].style.backgroundColor = "yellow";

Prova tu stesso

Esempio 4

Ottieni il testo del terzo figlio dell'elemento <select>:

let text = document.getElementById("mySelect").childNodes[2].text;

Prova tu stesso

Sintassi

element.childNodes

Valore di ritorno

Tipo Descrizione
Oggetto

Collezione di oggetti NodeList di nodi.

I nodi sono ordinati secondo l'ordine di apparizione nel documento.

Supporto del browser

element.childNodes È 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