Podstawy Document Object Model

Obiektowy model dokumentu czyli document object model to sposób reprezentacji dokumentów xml i html w postaci modelu zorientowanego obiektowo. Standard W3C DOM definiuje klasy i interfejsy pozwalające na dostęp do struktury dokumentów oraz jej modyfikację poprzez tworzenie, modyfikację i usuwanie węzłów. Dokument jest zbiorem węzłów. Węzły mogą zawierać kolejne podwęzły itd. (spójrz na poniższą ilustrację).

<p id="ident">Witam na mojej stronie</p>

Pobieranie elementów

document.getElementById("ident");//odwołanie do obiektu o id="ident"

document.getElementsByTagName("p");

document.getElementsByTagName("p").length;

document.getElementById("ident").getElementsByTagName("p");

document.getElementsByTagName("p")[0];//zwróci pierwszy akapit

document.getElementsByClassName("test");//zwróci wszystkie elementy o klasie test

document.getElementsByClassName("test przyklad");//zwróci wszystkie elementy, które posiadają zarówno klasę test jak i przyklad

function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) {
    // Używamy wbudowanej metody
      return node.getElementsByClassName(classname);
    } else {
      var results = [];
      var elems = node.getElementsByTagName("*");
      for (var i = 0; i < elems.length; i++) {
      if (elems[i].className.indexOf(classname) != -1) 
      {
	results[results.length] = elems[i];
      }
  }
    return results;
  }
}

Zabawa z atrybutami

var el = document.getElementById("ident");
el.getAttribute("id");//zwróci wartość atrybutu id

var el = document.getElementById("ident");
el.setAttribute("class","klasa");//dodajemy atrubut class o wartości klasa

el.removeAttribute("class");//usuwa atrubut class

Relacje w DOM

var el = document.getElementById("test").parentNode;

var el = document.getElementById("test").childNodes;
el_pierwszy = el[0];
el_drugi = el[1];

var obj = document.getElementById('divone');
if(obj.firstChild.nodeType == 3)
{
  obj.firstChild.nodeValue = 'nowy tekst';
}

Tworzenie elementów

var paragraf = document.createElement('p');

document.body.appendChild(paragraf);

var tekst = document.createTextNode('przykładowy tekst');
//Teraz dołączymy tekst do jakiegoś znacznika
paragraf.appendChild(tekst);

<div id="blok">
  <p id="paragraf"></p>
</div>

var d = document.getElementById('blok');
var p = document.getElementById('paragraf');
var usuwany_wezel = d.removeChild(p);

var node = document.getElementById('nadrzedny');
node.removeChild(node.childNodes[0]);

<div id="parent">
  <p>One</p>
</div>

var rodzic = document.getElementById('parent');
nowypar = document.createElement('p');
text = document.createTextNode('Two');
nowypar.appendChild(text);
rodzic.replaceChild(nowypar, rodzic.firstChild);

<div id="parent">
  <p>Two</p>
</div>

<div>
  <span id="child">Tekst 1</span>
</div>

var sp = document.createElement('span'); //tworzymy nowy element span
var text = document.createTextNode('Nowy element span'); //tworzymy nowy węzeł tekstowy
sp.appendChild(text); //dołączamy text do utworzonego wcześniej spana
var child = document.getElementById('child'); // łapiemy element o id child
var parent = child.parentNode; // ... oraz jego rodzica
parent.insertBefore(sp, child); //wstawiamy nowy span przed span o id="child"

<div>
  <span>Nowy element span</span>
  <span id="child">Tekst 1</span>
</div>

var p = document.getElementById('paragraf');
kopia = p.cloneNode(true);