Programmā JavaScript DOM koks seko hierarhiskajai struktūrai, kurā ir liels mezglu saraksts. Struktūra sākas no saknes mezgla (Dokumenta) un pēc tam tiek pievienota vecākmezglam un pakārtotajam mezglam. Lai piekļūtu šiem pakārtotajiem mezgliem, JavaScript piedāvā “ bērnsNodes ” īpašums. Šis rekvizīts palīdz lietotājiem piekļūt visam vai noteiktam saistītā vecākelementa pakārtotajam mezglam.
Šajā ziņojumā ir aprakstīts JavaScript HTML DOM elementa “childNodes” rekvizīta mērķis un darbība.
Kas ir JavaScript HTML DOM elementa “childNodes” rekvizīts?
' bērnsNodes ” ir tikai lasāms rekvizīts, kas atgriež visu elementa pakārtoto mezglu sarakstu NodeList objekta formā. Šo īpašo rekvizītu var izmantot arī, lai piekļūtu konkrētajam vecāka elementa pakārtotajam mezglam. Bērnu mezgls sākas ar indeksu “0 (nulle)”. Turklāt atstarpes, komentāri un teksta mezgli tiek uzskatīti arī par bērnu mezgliem.
Sintakse
elements.childNodes
Iepriekš vispārīgā sintakse atgriež objektu NodeList, kas satur mērķa elementa bērnu mezglus.
Izmantosim iepriekš definētās sintakses praktiski.
HTML kods
Vispirms apskatiet norādīto HTML kodu:
< div id = 'Div' stils = 'apmale: 2 pikseļi viendabīgi melna; augstums: 200 pikseļi; platums: 250 pikseļi; polsterējums: 10 pikseļi' >< h2 > Pirmais virsraksts h2 >
< h3 > Otrais virsraksts h3 >
< lpp > Pirmā rindkopa lpp >
< lpp > Otrā rindkopa lpp >
div >
< lpp id = 'priekš' > lpp >
Iepriekš minētajās koda rindās:
- Pievienojiet ' ” elements ar id “Div”, kas veidots ar norādīto (apmale, augstums un platums) rekvizītu palīdzību.
- Elementā “
” definējiet attiecīgi divus virsrakstus un divas rindkopas.- Visbeidzot, ' ” tags iegulst tukšu rindkopu ar ID “para”.
Piezīme: Norādītais HTML kods tiek ņemts vērā visā šajā ziņojumā.
1. piemērs: rekvizīta “childNodes” lietošana, lai iegūtu konkrēta elementa kopējo pakārtoto mezglu skaitu
Šajā piemērā tiek izmantoti rekvizīti “childNodes” un “length”, lai iegūtu kopējo pakārtoto mezglu skaitu, kas atrodas konkrētajā vecākelementā.
JavaScript kods
Sekosim dotajam kodam:
< skripts >
const elem = document.getElementById ( 'Div' ) ;
ļaut num = elem.childNodes.length;
document.getElementById ( 'priekš' ) .innerHTML = 'Vērtība:' + cipars;
skripts >Iepriekš minētajās koda rindās:
- Mainīgais “elem” izmanto “ getElementById() ” metode, lai piekļūtu vecākajam elementam, kura ID ir “Div”.
- Mainīgais “num” izmanto “ bērnsNodes ' un ' garums ” rekvizītus, lai iegūtu atvērtajā elementā “” esošo pakārtoto mezglu skaitu.
- Visbeidzot, metode “getElementById()” ienes iegulto tukšo rindkopu, izmantojot tās id “para”, lai pievienotu tai mainīgā vērtību “num”.
Izvade
Rezultāts nozīmē, ka ir kopējais ' 9 ” bērnu mezgli dotajā “
” elementā, ieskaitot atstarpes starp elementiem.2. piemērs: rekvizīta “childNodes” lietošana, lai iegūtu konkrēta bērna mezgla nosaukumu
Rekvizītu “childNodes” var izmantot arī kopā ar rekvizītu “nodeName”, lai iegūtu pakārtotā(-o) mezgla(-u) nosaukumu. Apskatīsim to praktiski.
JavaScript kods
Izejiet cauri šim kodam:
< skripts >
const elem = document.getElementById ( 'Div' ) ;
ļaut num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'priekš' ) .innerHTML = 'Elements:' +num;
skripts >Šeit “ bērnsNodes Īpašums ir saistīts ar nodeName ” rekvizītu, lai iegūtu norādītā pakārtotā mezgla nosaukumu, pamatojoties uz pieejamo indeksu, t.i., “1”.
Izvade
Izvadē tiek parādīts pakārtotā mezgla nosaukums, t.i., elements “H2” pret norādīto indeksu.
3. piemērs: rekvizīta “childNodes” lietošana, lai mainītu konkrēta pakārtota mezgla teksta krāsu
Šajā piemērā aplūkotais rekvizīts tiek izmantots, lai mainītu mērķa indeksētā bērna krāsu.
JavaScript kods
Apsveriet šādu kodu:
< skripts >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zaļš' ;
skripts >Šeit “ getElementById() ” metode ienes vecāku elementu “
”, izmantojot tā ID “Div”, un tā atvasinātais mezgls atrodas norādītajā indeksā, izmantojot “ bērnsNodes ” īpašumu, attiecīgi. Pēc tam izmantojiet ' stils.krāsa ”, lai mainītu piekļūtā pakārtotā mezgla teksta krāsu.Izvade
Izvade apstiprina, ka norādītā bērna mezgla teksta krāsa ir atbilstoši mainīta.
Secinājums
Programmā JavaScript “ bērnsNodes ” rekvizīts izgūst objektu nodeList, kas satur mērķa HTML elementa pakārtotos mezglus. Pakārtotajiem mezgliem var piekļūt visiem uzreiz vai vēlamajam, norādot indeksa numuru ar rekvizītu “childNodes”. Šis rekvizīts ļauj izpildīt JavaScript funkciju, lai veiktu īpašus uzdevumus piekļūtajiem pakārtotajiem mezgliem. Šajā rakstā ir aprakstīta rekvizīta “childNodes” lietošana JavaScript.
- Elementā “