În JavaScript, arborele DOM urmează structura ierarhică care conține o listă mare de noduri. Structura începe de la nodul rădăcină (Document) și apoi se adaugă cu nodurile părinte și copil. Pentru a accesa aceste noduri copil, JavaScript oferă „ childNodes ” proprietate. Această proprietate ajută utilizatorii să acceseze tot sau un anumit nod copil al elementului părinte asociat.
Acest post detaliază obiectivul și funcționarea proprietății „childNodes” a elementului DOM HTML în JavaScript.
Ce este proprietatea „childNodes” Element HTML DOM în JavaScript?
„ childNodes ” este o proprietate numai în citire care returnează lista tuturor nodurilor copil ale unui element sub forma unui obiect NodeList. Această proprietate specială poate fi utilizată și pentru a accesa nodul copil specific al elementului părinte. Nodul copil începe de la indicele „0 (zero)”. Mai mult decât atât, spațiile albe, comentariile și nodurile de text sunt, de asemenea, considerate noduri copil.
Sintaxă
element.childNodes
Sintaxa generalizată de mai sus returnează obiectul NodeList care conține nodurile copil ale elementului vizat.
Să folosim practic sintaxele definite mai sus.
Cod HTML
Mai întâi, aruncați o privire la codul HTML menționat:
< div id = 'Div' stil = 'chenar: 2px negru solid; înălțime: 200px; lățime: 250px; umplutură: 10px' >< h2 > Primul titlu h2 >
< h3 > Al doilea titlu h3 >
< p > Primul paragraf p >
< p > Al doilea paragraf p >
div >
< p id = 'pentru' > p >
În liniile de cod de mai sus:
- Adauga o ' ” element cu un id „Div”, stilat cu ajutorul proprietăților menționate (chenar, înălțime și lățime).
- În cadrul elementului „
”, definiți două titluri și, respectiv, două paragrafe.- În cele din urmă, „ Eticheta ” încorporează un paragraf gol cu un id „para”.
Notă: Codul HTML menționat este luat în considerare pe parcursul acestei postări.
Exemplul 1: aplicarea proprietății „childNodes” pentru a obține numărul total de noduri copil ale unui anumit element
Acest exemplu utilizează proprietățile „childNodes” și „length” pentru a obține numărul total de noduri copil prezente în elementul părinte specific.
Cod JavaScript
Să urmăm codul dat:
< scenariu >
const elem = document.getElementById ( 'Div' ) ;
lăsa num = elem.childNodes.length;
document.getElementById ( 'pentru' ) .innerHTML = 'Valoare:' + num;
scenariu >În rândurile de cod de mai sus:
- Variabila „elem” utilizează „ getElementById() ” pentru a accesa elementul părinte al cărui id este „Div”.
- Variabila „num” folosește „ childNodes ' și ' lungime ” pentru a obține numărul de noduri copil prezente în elementul „” accesat.
- În cele din urmă, metoda „getElementById()” preia paragraful gol încorporat prin id-ul său „para” pentru a-l adăuga cu valoarea variabilei „num”.
Ieșire
Rezultatul implică faptul că există un total „ 9 ” nodurile copil din elementul „
” dat, inclusiv spațiile albe dintre elemente.Exemplul 2: aplicarea proprietății „childNodes” pentru a obține numele unui anumit nod copil
Proprietatea „childNodes” poate fi utilizată și cu proprietatea „nodeName” pentru a obține numele nodului (nodurilor) copil. Să vedem practic.
Cod JavaScript
Treceți prin următorul cod:
< scenariu >
const elem = document.getElementById ( 'Div' ) ;
lăsa num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'pentru' ) .innerHTML = 'Element: ' +num;
scenariu >Aici ' childNodes ” proprietatea este legată de ” nodeName ” pentru a obține numele nodului copil specificat pe baza indexului accesat, adică „1”.
Ieșire
Ieșirea afișează numele nodului copil, adică elementul „H2” față de indexul specificat.
Exemplul 3: aplicarea proprietății „childNodes” pentru a schimba culoarea textului unui anumit nod copil
Acest exemplu folosește proprietatea discutată pentru a schimba culoarea copilului indexat țintă.
Cod JavaScript
Luați în considerare următorul cod:
< scenariu >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .stil.culoare = 'verde' ;
scenariu >Aici ' getElementById() ” metoda preia elementul părinte „
” prin id-ul său „Div” și nodul său copil plasat la indexul specificat prin intermediul „ childNodes ” proprietate, respectiv. După aceea, utilizați „ stil.culoare ” pentru a schimba culoarea textului nodului copil accesat.Ieșire
Ieșirea confirmă că culoarea textului nodului copil specificat a fost modificată în mod corespunzător.
Concluzie
În JavaScript, „ childNodes ” proprietatea preia obiectul nodeList care conține nodurile copil ale elementului HTML țintă. Nodurile copil pot fi accesate dintr-o dată sau pe cel dorit prin specificarea numărului de index cu proprietatea „childNodes”. Această proprietate permite execuția funcției JavaScript pentru a efectua sarcini speciale pe nodurile copil accesate. Acest articol a elaborat despre aplicarea proprietății „childNodes” în JavaScript.
- În cadrul elementului „