Document Object Model w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2739 razy

Document Objec Model (DOM) w JavaScript jest to globalnie dostępny obiekt zawierający niezbędne metody i właściwości związane z możliwością tworzenia elementów html jak i modyfikacji wyglądu i zachowania elementów dokumentu HTML. Obiekt ten ma nazwę document i jest dostępny globalnie.

Metody związane z pozyskiwaniem dostępu do elementów HTML

Użycie metody querySelector

Najlepszym sposobem pozyskiwania dostępu do elementu strony jest użycie metody querySelector, która umożliwia odwoływanie się do pierwszego elementu z wykorzystaniem selektorów używanych w CSS. Oto przykład:

var elementByID = document.querySelector("#page"); // zwraca element o id = page var elementsByClassName = document.querySelector(".nazwa_klasy"); // zwraca pierwszy element z przypisanym atrybutem class = "nazwa_klasy" var getInput = document.querySelector("article.comments input=[name = 'imie']"]; // zwróci element znajdujący się w article z class="comments" będący input-em z atrybutem name = "imie"

Użycie metody querySelectorAll

Metoda querySelectorAll w odróżnieniu od metody querySelector zwraca tablicę wszystkich elementów spełniających warunki zapytania:

var elementByID = document.querySelectorAll("#page"); // zwraca element o id = page jako tablicę jednoelementową (jeżeli element istnieje) var elementsByClassName = document.querySelectorAll(".nazwa_klasy"); // zwraca elementy z przypisanym atrybutem class = "nazwa_klasy" jako tablicę elementów klasy nazwa_klasy var getInput = document.querySelectorAll("article.comments input=[name = 'imie']"]; // zwróci element znajdujący się w article z class="comments" będący input-em z atrybutem name = "imie" w postaci tabicy

Ta jedna metoda może z powodzeniem zastąpić wszystkie poniżej opisywane starsze metody dostępu do elementów DOM.

Pobieranie elementu o określonym atrybucie id za pomocą metody getElementById

Na każdej stronie powinien znajdować się tylko jeden element o podanej wartości atrybutu id, jeżeli takich elementów jest więcej to jest to błąd. Atrybut id jest często wykorzystywany w skryptach ponieważ w jednoznaczny sposób wskazuje on na jeden z góry określony element strony.

var element = documet.getElementById("some_id");

Pobieranie tablicy elementów o określonym atrybucie class za pomocą metody getElementsByClassName

Wartość przypisywana atrybutowi class może być taka sama dla wielu elementów strony, dzięki czemu można im za pomocą CSS przypisać określony zbiór styli. W JavaScript możliwe jest wyciągnięcie tablicy elementów o takiej samej wartości tego atrybutu.

var elements = document.getElementByClassName("some_class_name");

Pobieranie tablicy elementów o określonym atrybucie name za pomocą metody getElementsByName

Zwraca wszystkie elementy na stronie posiadające podaną wartość atrybutu name.

var elements = document.getElementByName("some_name");

Pobieranie tablicy elementów o określonej nazwie tagu HTML za pomocą metody getElementsByTagName

Tagiem są nazwy znaczników np. h1, img itd. itp.

var elements = document.getElementsByTagName("h2");

Właściwości umożliwiające dostęp do określonych elementów dokumentu strony

Właściwość anchors

Lista znaczników <a> zawierających ustawiony tag name można uzyskać za pomocą właściwości anchor.

Właściwość body

Dostęp do elementu znacznika <body> można uzyskać za pomocą właściwości body.

Właściwość applets

Listę znaczników <applet> można uzyskać za pomocą właściwości applets.

Właściwość embeds

Listę znaczników <embed> można uzyskać za pomocą właściwości embeds.

Właściwość forms

Listę znaczników <form> można uzyskać za pomocą właściwości forms.

Właściwość head

Dostęp do elementu znacznika <head> można uzyskać za pomocą właściwości head.

Właściwość images

Listę znaczników <image> można uzyskać za pomocą właściwości images.

Właściwość links

Listę znaczników <a> lub <area> z ustawionym atrybutem href można uzyskać za pomocą właściwości links.

Właściwość scripts

Listę znaczników <script> można uzyskać za pomocą właściwości scripts.

Metody dodające nowe elementy, atrybuty lub zdarzenia

Dodawanie nowego uchwytu zdarzenia za pomocą metody addEventListener

Metoda addEventListener podpina daną funkcję pod zadane zdarzenie związane z dokumentem lub elementem wyciągniętym z dokumentu. Oto prosty przykład:

var button = document.createElement("BUTTON"); // tworzę w locie nad kukułczym gniazdem przycisk button.appendChild(document.createTextNode("Przycisk")); // dodaję do niego tekst button.setAttribute("id", "button"); // ustawiam atrybut id document.querySelector("#strona").appendChild(button); // dodaję przycisk na stronie document.querySelector("#button").addEventListener("click", function(){alert("kwiknąłeś");}); // a tutaj podpinam się pod zdarzenie click

Powyższy kod spowoduje wyświetlenie takiego oto przycisku:

Tworzenie nowego elementu za pomocą metody createElement

W wcześniejszym przykładzie pokazane zostało, jak można utworzyć przycisk. W ten sam sposób można utworzyć dowolny element HTML wpisując jako argument metody createElement nazwę takiego znacznika.

Tworzenie atrybutu za pomocą metody createAttribute

Metoda createAttribute przyjmuje jeden argument, którym jest nazwa atrybutu, zwrócony obiekt zawiera pole value określający wartość tego atrybutu.

Tworzenie nowego elementu tekstowego za pomocą metody createTextNode

W pomiędzy zwykłe znaczniki HTML można wstawić tekst, ta metoda umożliwia utworzenie elementu, który ten tekst będzie reprezentował.

Właściwość cookie

Właściwość ta zmiennej globalnej document zwraca wszystkie wartości zawarte w ciasteczku strony w postaci zmiennej tekstowej

Właściwość characterSet

Zwraca informację o stronie kodowej dokumentu.

Właściwość doctype

Zwraca typ deklaracji dokumentu związaną z dokumentem strony.

Właściwość documentMode

Zwraca lub zmienia ustawienie sposobu wyświetlania dokumentu.

Właściwość documentURI

Zwraca lub ustawia bezwzględny adres do wyświetlanej strony.

Właściwość domain

Zwraca nazwę domeny, z której wyświetlana jest strona.