In JavaScript, l'albero DOM segue la struttura gerarchica contenente un ampio elenco di nodi. La struttura inizia dal nodo radice (Documento) e quindi si aggiunge ai nodi padre e figlio. Per accedere a questi nodi figlio, JavaScript offre il ' childNodes ' proprietà. Questa proprietà aiuta gli utenti ad accedere a tutti oa uno specifico nodo figlio dell'elemento genitore associato.
Questo post approfondisce l'obiettivo e il funzionamento della proprietà 'childNodes' dell'elemento HTML DOM in JavaScript.
Che cos'è la proprietà 'childNodes' dell'elemento HTML DOM in JavaScript?
IL ' childNodes ” è una proprietà di sola lettura che restituisce l'elenco di tutti i nodi figlio di un elemento sotto forma di un oggetto NodeList. Questa proprietà speciale può essere utilizzata anche per accedere al nodo figlio specifico dell'elemento genitore. Il nodo figlio inizia dall'indice '0 (zero)'. Inoltre, anche gli spazi bianchi, i commenti e i nodi di testo sono considerati nodi figli.
Sintassi
element.childNodes
La sintassi generalizzata sopra restituisce l'oggetto NodeList contenente i nodi figlio dell'elemento di destinazione.
Usiamo praticamente le sintassi sopra definite.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML dichiarato:
< div id = 'Div' stile = 'bordo: 2px nero pieno; altezza: 200px; larghezza: 250px; imbottitura: 10px' >< h2 > Prima rubrica h2 >
< h3 > Seconda rubrica h3 >
< P > Primo paragrafo P >
< P > Secondo paragrafo P >
div >
< P id = 'per' > P >
Nelle righe di codice sopra:
- Aggiungere un ' ” con un id “Div”, stilizzato con l'aiuto delle proprietà dichiarate (bordo, altezza e larghezza).
- All'interno dell'elemento '
', definire rispettivamente due intestazioni e due paragrafi.- Infine il “ Il tag ” incorpora un paragrafo vuoto con un id “para”.
Nota: Il codice HTML dichiarato è considerato in tutto questo post.
Esempio 1: applicazione della proprietà 'childNodes' per ottenere il numero totale di nodi figlio di un particolare elemento
Questo esempio utilizza le proprietà 'childNodes' e 'length' per ottenere il numero totale di nodi figlio presenti nell'elemento padre specifico.
codice javascript
Seguiamo il codice dato:
< copione >
const elem = document.getElementById ( 'Div' ) ;
permettere num = elem.childNodes.length;
document.getElementById ( 'per' ) .innerHTML = 'Valore: ' + numero;
copione >Nelle righe di codice precedenti:
- La variabile 'elem' utilizza il ' getElementById() ” per accedere all'elemento genitore il cui id è “Div”.
- La variabile 'num' utilizza il ' childNodes ' E ' lunghezza ” per ottenere il numero di nodi figlio presenti nell'elemento “” a cui si accede.
- Infine, il metodo 'getElementById()' recupera il paragrafo vuoto incorporato tramite il suo id 'para' per aggiungerlo con il valore della variabile 'num'.
Produzione
L'output implica che esiste un totale ' 9 ” nodi figlio nell'elemento “
” specificato inclusi gli spazi bianchi tra gli elementi.Esempio 2: applicazione della proprietà 'childNodes' per ottenere il nome di un nodo figlio specifico
La proprietà 'childNodes' può essere utilizzata anche con la proprietà 'nodeName' per ottenere il nome del nodo figlio. Vediamolo praticamente.
codice javascript
Passa attraverso il seguente codice:
< copione >
const elem = document.getElementById ( 'Div' ) ;
permettere num = elem.childNodes [ 1 ] .NomeNodo;
document.getElementById ( 'per' ) .innerHTML = 'Elemento: ' +numero;
copione >Ecco, il “ childNodes ” proprietà è collegata con “ nomeNodo ” per ottenere il nome del nodo figlio specificato in base all'indice a cui si accede, ad esempio '1'.
Produzione
L'output mostra il nome del nodo figlio, ad esempio l'elemento 'H2' rispetto all'indice specificato.
Esempio 3: applicazione della proprietà 'childNodes' per modificare il colore del testo di un nodo figlio specifico
Questo esempio utilizza la proprietà discussa per modificare il colore del figlio indicizzato di destinazione.
codice javascript
Considera il seguente codice:
< copione >
document.getElementById ( 'Div' ) .childNodi [ 3 ] .style.color = 'verde' ;
copione >Ecco, il “ getElementById() ” recupera l'elemento genitore “
” tramite il suo id “Div” e il suo nodo figlio posizionato all'indice specificato tramite il “ childNodes ” proprietà, rispettivamente. Successivamente, usa il ' stile.colore ” per modificare il colore del testo del nodo figlio a cui si accede.Produzione
L'output conferma che il colore del testo del nodo figlio specificato è stato modificato in modo appropriato.
Conclusione
In JavaScript, il ' childNodes ” recupera l'oggetto nodeList contenente i nodi figlio dell'elemento HTML di destinazione. È possibile accedere ai nodi figli tutti in una volta o quello desiderato specificando il numero di indice con la proprietà 'childNodes'. Questa proprietà consente l'esecuzione della funzione JavaScript per eseguire attività speciali sui nodi figli a cui si accede. Questo articolo ha approfondito l'applicazione della proprietà 'childNodes' in JavaScript.
- All'interno dell'elemento '