A JavaScriptben a DOM fa a csomópontok nagy listáját tartalmazó hierarchikus struktúrát követi. A struktúra a gyökércsomópontból (Dokumentum) indul, majd hozzáfűződik a szülő és gyermek csomópontokhoz. A gyermek csomópontok eléréséhez a JavaScript felajánlja a „ gyermekNodes ' ingatlan. Ez a tulajdonság segíti a felhasználókat, hogy hozzáférjenek a társított szülőelem összes vagy egy adott gyermekcsomópontjához.
Ez a bejegyzés a HTML DOM elem „childNodes” tulajdonságának céljával és működésével foglalkozik a JavaScriptben.
Mi a HTML DOM elem „childNodes” tulajdonsága a JavaScriptben?
A ' gyermekNodes ” egy csak olvasható tulajdonság, amely egy elem összes gyermek csomópontjának listáját adja vissza NodeList objektum formájában. Ez a speciális tulajdonság a szülőelem adott gyermekcsomópontjának eléréséhez is használható. A gyermek csomópont a „0 (nulla)” indextől indul. Ezenkívül a szóközök, a megjegyzések és a szöveges csomópontok is gyermekcsomópontoknak számítanak.
Szintaxis
elem.childNodes
A fent általánosított szintaxis visszaadja a NodeList objektumot, amely a megcélzott elem gyermekcsomópontjait tartalmazza.
Használjuk gyakorlatiasan a fent definiált szintaxisokat.
HTML kód
Először nézze meg a megadott HTML-kódot:
< div id = 'Div' stílus = 'szegély: 2 képpont tömör fekete; magasság: 200 képpont; szélesség: 250 képpont; kitöltés: 10 képpont' >< h2 > Első címsor h2 >
< h3 > Második címsor h3 >
< p > Első bekezdés p >
< p > Második bekezdés p >
div >
< p id = 'for' > p >
A fenti kódsorokban:
- Adj hozzá egy ' ” elem „Div” azonosítóval, a megadott (szegély, magasság és szélesség) tulajdonságok segítségével stílusozva.
- A „
” elemen belül határozzon meg két címsort és két bekezdést.- Végül a „ ” címke egy üres bekezdést ágyaz be „para” azonosítóval.
Jegyzet: Ebben a bejegyzésben a megadott HTML-kódot figyelembe veszik.
1. példa: A „childNodes” tulajdonság alkalmazása egy adott elem gyermekcsomópontjainak teljes számának lekéréséhez
Ez a példa a „childNodes” és a „length” tulajdonságokat használja az adott szülőelemben található gyermekcsomópontok teljes számának lekérdezéséhez.
JavaScript kód
Kövessük a megadott kódot:
< forgatókönyv >
const elem = document.getElementById ( 'Div' ) ;
hagyja szám = elem.childNodes.length;
document.getElementById ( 'for' ) .innerHTML = 'Érték:' + szám;
forgatókönyv >A fenti kódsorokban:
- Az „elem” változó a „ getElementById() ” metódussal érheti el a „Div” azonosítójú szülőelemet.
- A „szám” változó a „ gyermekNodes ” és „ hossz ” tulajdonságokat, hogy lekérdezze az elért „” elemben található gyermekcsomópontok számát.
- Végül a „getElementById()” metódus lekéri a beágyazott üres bekezdést a „para” azonosítóján keresztül, és hozzáfűzi a „num” változó értékéhez.
Kimenet
A kimenet azt jelenti, hogy van egy teljes ' 9 ” gyermek csomópontok az adott „
” elemben, beleértve az elemek közötti szóközöket.2. példa: A „childNodes” tulajdonság alkalmazása egy adott gyermekcsomópont nevének lekéréséhez
A „childNodes” tulajdonság a „nodeName” tulajdonsággal együtt is használható az utódcsomópont(ok) nevének lekéréséhez. Lássuk a gyakorlatban.
JavaScript kód
Menj át a következő kódon:
< forgatókönyv >
const elem = document.getElementById ( 'Div' ) ;
hagyja szám = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'for' ) .innerHTML = 'Elem:' +szám;
forgatókönyv >Itt a „ gyermekNodes ' ingatlan kapcsolódik a ' nodeName ” tulajdonság, hogy megkapja a megadott gyermekcsomópont nevét az elért index alapján, azaz „1”.
Kimenet
A kimenet megjeleníti a gyermek csomópont nevét, azaz a „H2” elemet a megadott index mellett.
3. példa: A „childNodes” tulajdonság alkalmazása egy adott gyermekcsomópont szövegszínének megváltoztatásához
Ez a példa a tárgyalt tulajdonságot használja a célindexelt gyermek színének megváltoztatására.
JavaScript kód
Vegye figyelembe a következő kódot:
< forgatókönyv >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zöld' ;
forgatókönyv >Itt a „ getElementById() ” metódus lekéri a szülő „
” elemet annak „Div” azonosítójával, és a gyermek csomópontját a megadott indexen keresztül a „ gyermekNodes ” ingatlan, ill. Ezt követően használja a „ stílus.szín ” tulajdonságot az elért gyermekcsomópont szövegszínének megváltoztatásához.Kimenet
A kimenet megerősíti, hogy a megadott gyermekcsomópont szövegszíne megfelelően módosult.
Következtetés
A JavaScriptben a „ gyermekNodes ” tulajdonság lekéri a cél HTML elem gyermekcsomópontjait tartalmazó nodeList objektumot. Az utódcsomópontok egyszerre, vagy a kívánt, az indexszám „childNodes” tulajdonsággal történő megadásával érhetők el. Ez a tulajdonság lehetővé teszi, hogy a JavaScript függvény végrehajtása speciális feladatokat hajtson végre az elért gyermek csomópontokon. Ez a cikk a „childNodes” tulajdonság JavaScriptben való alkalmazását tárgyalja.
- A „