HTML5 - DOM část 2

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říklad
Existuje 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