Obsah
V první části tohoto tutoriálu jsme viděli, jak je DOM strukturován a jak funguje, v tomto s ním budeme nadále pracovat, abychom rozšířili jeho funkce a mohli manipulovat se všemi prvky našeho dokumentu HTML.Práce s DOM
K přístupu k objektu dokumentu používáme globální proměnnou dokumentu; Tato proměnná je jedním z klíčových objektů, které pro nás prohlížeč vytváří, protože prostřednictvím tohoto objektu dokumentu můžeme přistupovat k informacím o dokumentu jako celku a poskytuje nám individuální přístup ke každému objektu dokumentu.
Jako vždy se podívejme na příklad, s nímž můžeme sladit teorii, kterou známe, se způsobem, jakým je aplikována ve skutečnosti.
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.
Kód, se kterým používáme SLUNCE Je poměrně krátký a jednoduchý, nicméně zachycuje různá použití, která mu můžeme dát, vysvětlíme kód po částech, abychom zjistili, jak jsme objekty použili.
Jednou z nejzákladnějších akcí, kterou můžeme použít, je získání informací z dokumentu HTML, se kterým pracujeme, takže první řádek, který jsme umístili do našeho kódu, to právě dělá a vidíme to:
document.writeln ("
URL: "+ document.URL);
V tomto případě odečteme hodnotu nemovitosti document.URL, která vrací URL aktuálního dokumentu, tedy URL, které prohlížeč použil k načtení dokumentu, ve kterém máme kód.
Také vidíme, jak používáme metodu writeeln:
document.writeln ("
URL: "+ document.URL);
Tato metoda jednoduše přidá obsah na konec našeho dokumentu HTML, v tomto konkrétním případě začneme přidáním značky
a potom vlastnost URL, pomocí které jsme již upravili strukturu a obsah DOM.
Další věc, kterou jsme udělali, bylo vybrat všechny prvky, které mají v dokumentu značku p, a proto použijeme následující řádek:
var elems = document.getElementsByTagName ("p");
Jak vidíme metodu getElementsByTagName Je to ten, který slouží našemu účelu, zároveň vše, co tato metoda shromažďuje, přiřadíme proměnným elem.
V dalším řádku provedeme iteraci proměnné elems a získáme přiřazené objekty. Pro každý z nich, který budeme iterovat, přidáme řádek textu s jeho id a později změníme jeho atributy, abychom změnili jeho vzhled .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" +elems [i] .id); elems [i] .style.border = "středně dvojitá černá"; elems [i] .style.padding = "4px"; }
Jak vidíme, přidáme ohraničení ke každému prvku, který máme uložený v našich variabilních prvcích, a navíc přidáme odsazení.
Po tom všem se konečně podívejme, jak to všechno vypadá v prohlížeči:
ZVĚTŠIT
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 
