V JavaScripte sa strom DOM riadi hierarchickou štruktúrou obsahujúcou veľký zoznam uzlov. Štruktúra začína od koreňového uzla (Dokument) a potom sa pripája k rodičovskému a podriadenému uzlu. Na prístup k týmto podriadeným uzlom JavaScript ponúka „ dieťaNodes ' nehnuteľnosť. Táto vlastnosť pomáha používateľom pristupovať ku všetkým alebo konkrétnym podriadeným uzlom priradeného rodičovského prvku.
Tento príspevok rozvádza cieľ a fungovanie vlastnosti prvku HTML DOM „childNodes“ v JavaScripte.
Čo je vlastnosť prvku HTML DOM „childNodes“ v JavaScripte?
' dieťaNodes ” je vlastnosť len na čítanie, ktorá vracia zoznam všetkých dcérskych uzlov prvku vo forme objektu NodeList. Túto špeciálnu vlastnosť možno použiť aj na prístup k špecifickému podriadenému uzlu rodičovského prvku. Podradený uzol začína od indexu „0 (nula)“. Okrem toho sa biele znaky, komentáre a textové uzly tiež považujú za podradené uzly.
Syntax
element.childNodes
Vyššie zovšeobecnená syntax vráti objekt NodeList obsahujúci podradené uzly cieľového prvku.
Využime vyššie definované syntaxe prakticky.
HTML kód
Najprv si pozrite uvedený HTML kód:
< div id = 'Div' štýl = 'ohraničenie: 2 pixely plné čierne; výška: 200 pixelov; šírka: 250 pixelov; výplň: 10 pixelov' >< h2 > Prvý nadpis h2 >
< h3 > Druhý nadpis h3 >
< p > Prvý odsek p >
< p > Druhý odsek p >
div >
< p id = 'pre' > p >
Vo vyššie uvedených riadkoch kódu:
- Pridaj ' ” prvok s id „Div“, štylizovaný pomocou uvedených vlastností (okraj, výška a šírka).
- V rámci prvku „
“ definujte dva nadpisy a dva odseky.- Nakoniec, „ ” tag vloží prázdny odsek s id “para”.
Poznámka: Uvedený HTML kód je zohľadnený v celom tomto príspevku.
Príklad 1: Použitie vlastnosti „childNodes“ na získanie celkového počtu podriadených uzlov konkrétneho prvku
Tento príklad využíva vlastnosti „childNodes“ a „length“ na získanie celkového počtu podriadených uzlov prítomných v konkrétnom rodičovskom prvku.
JavaScript kód
Nasledujme zadaný kód:
< skript >
const elem = document.getElementById ( 'Div' ) ;
nech num = elem.childNodes.length;
document.getElementById ( 'pre' ) .innerHTML = 'Hodnota: ' + číslo;
skript >Vo vyššie uvedených riadkoch kódu:
- Premenná „elem“ využíva „ getElementById() ” na prístup k rodičovskému prvku, ktorého ID je „Div“.
- Premenná „num“ používa „ dieťaNodes “ a „ dĺžka vlastnosti, aby ste získali počet podriadených uzlov prítomných v sprístupnenom prvku „“.
- Nakoniec metóda „getElementById()“ načíta vložený prázdny odsek cez jeho id „para“ a pripojí k nemu hodnotu premennej „num“.
Výkon
Výstup znamená, že existuje celkom „ 9 podriadené uzly v danom prvku „
“ vrátane medzier medzi prvkami.Príklad 2: Použitie vlastnosti „childNodes“ na získanie názvu konkrétneho podradeného uzla
Vlastnosť „childNodes“ sa môže použiť aj s vlastnosťou „nodeName“ na získanie názvu podriadeného uzla (uzlov). Pozrime sa na to prakticky.
JavaScript kód
Prejdite si nasledujúci kód:
< skript >
const elem = document.getElementById ( 'Div' ) ;
nech num = elem.childNodes [ 1 ] .názov uzla;
document.getElementById ( 'pre' ) .innerHTML = 'Element: ' +číslo;
skript >Tu je „ dieťaNodes „vlastnosť je prepojená s „ nodeName vlastnosť ” na získanie zadaného názvu podriadeného uzla na základe prístupového indexu, t. j. „1“.
Výkon
Výstup zobrazuje názov podriadeného uzla, t. j. prvok „H2“ oproti zadanému indexu.
Príklad 3: Použitie vlastnosti „childNodes“ na zmenu farby textu konkrétneho podradeného uzla
Tento príklad používa diskutovanú vlastnosť na zmenu farby cieľového indexovaného potomka.
JavaScript kód
Zvážte nasledujúci kód:
< skript >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zelená' ;
skript >Tu je „ getElementById() metóda načíta nadradený prvok „
“ cez jeho id „Div“ a jeho podriadený uzol umiestnený na zadanom indexe cez „ dieťaNodes “ majetok, resp. Potom použite „ štýl.farba ” na zmenu farby textu prístupového podradeného uzla.Výkon
Výstup potvrdí, že farba textu zadaného dcérskeho uzla bola primerane zmenená.
Záver
V JavaScripte je „ dieťaNodes Vlastnosť ” načíta objekt nodeList obsahujúci podradené uzly cieľového prvku HTML. K podradeným uzlom možno pristupovať naraz alebo k požadovanému uzlu zadaním indexového čísla pomocou vlastnosti „childNodes“. Táto vlastnosť umožňuje spustenie funkcie JavaScript na vykonávanie špeciálnych úloh na podriadených uzloch, ku ktorým sa pristupuje. Tento článok sa zaoberá aplikáciou vlastnosti „childNodes“ v jazyku JavaScript.
- V rámci prvku „