Skip to Content

Javascript - DOM - přístup k elementům

Jak získat elementy z html stránky, aby s nimi bylo možno dále pracovat pomocí objektového modelu dokumentu? Můžeme si vybrat podle potřeby ze dvou primárních metod: getElementById a getElementByName. Už z názvu metod je jasné, jakým způsobem se budou data získávat.
V první jmenované budeme k elementu přistupovat pomocí jeho identifikátoru:

Příklad:
   <p id="novy">nějaký textík</p>

Odkaz na element p pak získáme pomocí této metody:

   var elemP = document.getElementById("novy");

Druhá metoda využívá přístup k elementu pomocí názvu značky - getElementsByName. Tato metoda se hodí zejména při potřebě získat odkazy na všechny elementy se stejnou značkou např. img, p, atd...Odkazy se uloží do pole, z kterých je potom získáme pomocí cyklů, např. while nebo for.

Příklad:
   var elemImg = document.getElementsByTagName("img");
   for (var i = 0; i < elemImg.length; i++)
   {
   elemImg[i].omnouseover = fceOver;
   elemImg[i].omnouseout = fceOut;
   }

Dále v tomto příkladu bychom museli nadefinovat dvě funkce fceOver a fceOut a vložit do nich nějaký program, který potřebujete ke změně elementů img při najetí myši nad nimi či jejich opuštění.

Doteď jsme k elementům jen přistupovali, ale lze nastavovat také jejich parametry? Odpověď na otázku zní ano, a to s využitím metod getAttribute, setAtributte a našich známých cyklů.

Příklad 1 (přiřazení názvu identifikátoru):

   mujElem.setAttribute("id","mujElem");

Příklad 2:

   <a href="http://www.prvnistranka.com" id="prvniStranka">První stránka</a>

   var a1 = document.getElementById("prvniStranka");

   a1.setAttribute("href","http://www.druhastranka.com");

 

Potřebujeme také elementy vytvářet, nastavovat jim identifikátor, či je odstraňovat. Pomocí metody createElementt vytvoříme novou obalovací značku:

   var novyElem = document.createElement("span");

Získáme z dokumentu prvek, do kterého vložíme ten nově vytvořený :

    var vezmiElem = document.getElementById("odstavec1");

Naplnění nového prvku textem:

   novyElem.appendChild(document.createTextNode("Ať žijeme!));

A nakonec vložení elementu "span" do elementu "p" s identifikátorem odstavec1:

   vezmiElem.appendChild(novyElem);

 

Poslední metoda má za úkol odstraňovat jednotlivé elementy. Metoda nese název removeChild.

Příklad:

   document.body.removeChild(novElem);