V JavaScriptu se strom DOM řídí hierarchickou strukturou obsahující velký seznam uzlů. Struktura začíná od kořenového uzlu (Dokument) a poté se připojuje k nadřazenému a podřízenému uzlu. Pro přístup k těmto podřízeným uzlům nabízí JavaScript „ childNodes ' vlastnictví. Tato vlastnost pomáhá uživatelům přistupovat ke všem nebo konkrétnímu podřízenému uzlu přidruženého nadřazeného prvku.
Tento příspěvek rozvádí cíl a fungování vlastnosti prvku HTML DOM „childNodes“ v JavaScriptu.
Co je vlastnost „childNodes“ prvku HTML DOM v JavaScriptu?
' childNodes ” je vlastnost pouze pro čtení, která vrací seznam všech podřízených uzlů prvku ve formě objektu NodeList. Tuto speciální vlastnost lze také využít pro přístup ke konkrétnímu podřízenému uzlu nadřazeného prvku. Podřízený uzel začíná od indexu „0 (nula)“. Bílé znaky, komentáře a textové uzly jsou navíc považovány za podřízené uzly.
Syntax
element.childNodes
Výše zobecněná syntaxe vrací objekt NodeList obsahující podřízené uzly cílového prvku.
Použijme výše definované syntaxe prakticky.
HTML kód
Nejprve se podívejte na uvedený HTML kód:
< div id = 'Div' styl = 'ohraničení: 2px plná černá; výška: 200px; šířka: 250px; odsazení: 10px' >< h2 > První nadpis h2 >
< h3 > Druhý nadpis h3 >
< p > První odstavec p >
< p > Druhý odstavec p >
div >
< p id = 'pro' > p >
Ve výše uvedených řádcích kódu:
- Přidat ' ” prvek s id „Div“, stylizovaný pomocí uvedených vlastností (okraj, výška a šířka).
- V prvku „
“ definujte dva nadpisy a dva odstavce.- Konečně, „ ” tag vloží prázdný odstavec s id “para”.
Poznámka: Uvedený HTML kód je zohledněn v celém tomto příspěvku.
Příklad 1: Použití vlastnosti „childNodes“ k získání celkového počtu podřízených uzlů konkrétního prvku
Tento příklad využívá vlastnosti „childNodes“ a „length“ k získání celkového počtu podřízených uzlů přítomných v konkrétním nadřazeném prvku.
JavaScript kód
Řiďme se zadaným kódem:
< skript >
const elem = document.getElementById ( 'Div' ) ;
nechat num = elem.childNodes.length;
document.getElementById ( 'pro' ) .innerHTML = 'Hodnota:' + číslo;
skript >Ve výše uvedených řádcích kódu:
- Proměnná „elem“ využívá „ getElementById() ” pro přístup k rodičovskému prvku, jehož id je „Div“.
- Proměnná „num“ používá „ childNodes ' a ' délka ” vlastnosti, abyste získali počet podřízených uzlů přítomných v přístupném prvku „“.
- Nakonec metoda „getElementById()“ načte vložený prázdný odstavec přes jeho id „para“ a připojí k němu hodnotu proměnné „num“.
Výstup
Výstup znamená, že existuje celkem „ 9 podřízené uzly v daném prvku „
“ včetně mezer mezi prvky.Příklad 2: Použití vlastnosti „childNodes“ k získání názvu konkrétního podřízeného uzlu
Vlastnost „childNodes“ lze také použít s vlastností „nodeName“ k získání názvu podřízeného uzlu (uzlů). Podívejme se na to prakticky.
JavaScript kód
Projděte si následující kód:
< skript >
const elem = document.getElementById ( 'Div' ) ;
nechat num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'pro' ) .innerHTML = 'Prvek: ' +číslo;
skript >Zde, „ childNodes “ vlastnost je spojena s “ nodeName ” pro získání zadaného názvu podřízeného uzlu na základě přístupného indexu, tj. „1“.
Výstup
Výstup zobrazuje název podřízeného uzlu, tj. prvek „H2“ proti zadanému indexu.
Příklad 3: Použití vlastnosti „childNodes“ ke změně barvy textu konkrétního podřízeného uzlu
Tento příklad používá diskutovanou vlastnost ke změně barvy cílového indexovaného potomka.
JavaScript kód
Zvažte následující kód:
< skript >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'zelená' ;
skript >Zde, „ getElementById() metoda načte nadřazený prvek „
“ prostřednictvím jeho id „Div“ a jeho podřízený uzel umístěný na zadaném indexu prostřednictvím „ childNodes “, resp. Poté použijte „ styl.barva ” pro změnu barvy textu zpřístupňovaného podřízeného uzlu.Výstup
Výstup potvrdí, že barva textu zadaného podřízeného uzlu byla náležitě změněna.
Závěr
V JavaScriptu „ childNodes Vlastnost ” načte objekt nodeList obsahující podřízené uzly cílového prvku HTML. K podřízeným uzlům lze přistupovat najednou nebo k požadovanému uzlu zadáním čísla indexu pomocí vlastnosti „childNodes“. Tato vlastnost umožňuje spouštění funkce JavaScript k provádění speciálních úloh na podřízených uzlech, ke kterým se přistupuje. Tento článek podrobně popisuje použití vlastnosti „childNodes“ v JavaScriptu.
- V prvku „