Procházejte stromem DOM
Jak jsme zmínili, navigaci lze provádět prostřednictvím hierarchické struktury vizualizující schéma jako strom, tímto způsobem můžeme s prvky zacházet jako s rodiči, dětmi, sourozenci.
Díky tomu lze hledat prvek podle filozofie hledání podle vztahu.
Podívejme se na dostupné metody, než přejdeme k praktickým aplikacím:
· childNodes: Vrátí všechny podřízené prvky nadřazeného prvku.
· první dítě: Vrátí prvek, který je prvním potomkem nadřazeného prvku.
· hasChildNodes (): Vrací true nebo true, pokud má aktuální prvek podřízené uzly.
· poslední dítě: Vrátí poslední podřízený prvek v dokumentu.
· dalšíSourozenec: Vrátí prvek sourozence definovaný aktuálním prvkem HTML.
· parentNode: Vrátí nadřazený prvek aktuálního prvku HTML.
· předchozíSourozenec: Vrátí prvek sourozence před aktuální prvek HTML.
Jakmile víme, jaké metody máme k dispozici, uvidíme jednoduchý příklad kódu, pomocí kterého pochopíme, o čem je navigace. Strom DOM.PříkladExistuje spousta různých druhů ovoce - existuje více než 500 odrůd banánů. V době, kdy přidáme nespočet druhů jablek, pomerančů a dalšího známého ovoce, máme před sebou tisíce možností.
Jedním z nejzajímavějších aspektů ovoce je odrůda dostupná v každé zemi. Bydlím poblíž Londýna, v oblasti, která je známá svými jablky.
Rodič První dítě Předchozí sourozenec Další sourozenec
Toho, čeho tento kód dosahuje, je schopnost procházet mezi prvky a jakmile je zastíní světle šedou barvou, aby bylo možné rozlišit, ve které části dokumentu se nacházíme, podívejme se na obrázku, jak bychom to měli vidět v našem prohlížeči:
Tímto jsme dokončili tento tutoriál, kde jsme byli schopni hledat prvky v dokumentu HTML, aniž bychom se museli spoléhat na identifikátory nebo názvy prvků, jednoduše pomocí jejich vztahu v hierarchické struktuře.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
