|
DOM - Obiektowy Model Dokumentu
DOM (ang. Document Object Model, obiektowy model dokumentu) to API dla dokumentów (X)HTML. Wprowadza strukturalne odwzorowanie dokumentu, pozwalając modyfikować jego zawartość i warstwę prezentacji. Podsumowując, DOM łączy strony WWW ze skryptami lub innymi językami programowania. DOM W3C jest podzielony na dwie części:
Podstawowe obiekty Głównym, globalnym obiektem w DOM przeglądarki jest window. W tym obiekcie przechowywane są wszystkie globalne zmienne i funkcje. W nim znajduje się także obiekt document, który reprezentuje całą stronę XHTML. document.documentElement to jest główny element dokumentu (korzeń), czyli <html>.
Odnajdywanie elementów Wszystkie metody DOM można wywołać dla dowolnego elementu dokumentu lub dla samego obiektu document. Do elementów strony możemy odwoływać się na kilka sposobów:
Zmiana wyglądu elementów DOM umożliwia zmianę wyglądu elementów na stronie. Można to zrobić za pomocą stylów, np.:
var obj = document.getElementsByTagName('p');
for(var i=0 ; i < obj.length ; i++)
{ obj[i].style.color = "green";
obj[i].style.backgroundColor = "red";
obj[i].style.fontSize = "14px";
}
Jeżeli a stylach mamy zdefiniowane klasy, to można to samo zrobić prościej korzystając z definicji klasy CSS, np.:
var obj = document.getElementsByTagName('p');
for(var i=0 ; i < obj.length ; i++)
{ obj[i].className = "mojaKlasaCSS";
}
Przemieszczanie się po elementach strony Żeby trafić indywidualnie do każdego elementu dokumentu nie musisz nadawać każdemu z nich identyfikatorów. Każdy element (czyli tag) posiada metody wskazujące na jego sąsiednie elementy (tagi):
Zwracana wartość może być równa null, jeżeli nie ma elementu, który by mogła wskazywać. Domyślnie pola te wskazują na dowolne węzły, łącznie z tekstem i komentarzami w dokumencie. Elementy od innych węzłów można odróżnić za pomocą pola nodeType. np.:
if (obj.nextSibling && obj.nextSibling.nodeType == 1)
{ alert('Sąsiedni węzeł jest elementem');
}
Poniżej masz pełną listę typów:
Atrybuty elementów Dla każdego z elementów strony możemy:
<p align="center" title="Mój akapit" id="akapit" style="colot:red">Tekst akapitu...</p>
..........................
var p = document.getElementById('akapit');
// wyświetlamy wartość atrybutu TITLE
var pTitle = p.getAttribute('title');
alert(pTitle);
// sprawdzamy, czy istnieje atrybut CLASS
var pClassName = p.hasAttribute('class');
alert(pClassName);
// nadpisze atrybut ALIGN
p.setAttribute("align", "right");
// stworzy nowy atrybut i przypisze mu wartość
p.setAttribute("lang", "pl");
// usuwamy atrybut STYLE
p.removeAttribute("style");
Usuwanie elementów Każdy element posiada metodę removeChild pozwalającą usunąć jeden z zawartych w nim węzłów, np.:
// element usunie się sam:
element.parentNode.removeChild(element);
Dodawanie nowych elementów Nowe elementy tworzymy przez metodę document.createElement(tag). Stworzony element nie jest automatycznie wyświetlany w dokumencie. Trzeba go dodać za pomocą metody appendChild lub insertBefore.
// wstawiamy nowy akapit na końcu dokumentu
var p = document.createElement("p");
p.innerHTML = "<b>Tekst w nowym akapicie...</b>";
document.body.appendChild(p);
// wstawiamy nowy blok przed wybranym elementem
var div = document.createElement("div");
div.innerHTML = "<b>Tekst we wstawionym DIVie...</b>";
var obj = document.getElementById("wstawPrzed");
document.insertBefore(div, obj);
Wykonanie appendChild lub insertBefore na elementach, które są już w dokumencie, przeniesie je automatycznie w nowe miejsce. Tekst tworzy się za pomocą document.createTextNode("tekst") i podobnie jak elementy trzeba go wstawić do dokumentu, żeby stał się widoczny, np.:
var t = document.createTextNode("Dodatkowy tekst w akapicie.");
var p = document.getElementById("akapit");
p.appendChild(t);
|