Document Object Model w JavaScript

Stronę tą wyświetlono już: 180 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 elementów strony jest użycie metody querySelector, która umożliwia odwoływanie się do elementów z wykorzystaniem selektorów używanych w CSS. Oto przykład:

Listing 1
  1. var elementByID = document.querySelector("#page"); // zwraca element o id = page
  2. var elementsByClassName = document.querySelector(".nazwa_klasy"); // zwraca elementy z przypisanym atrybutem class = "nazwa_klasy"
  3. 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"

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.

Listing 2
  1. 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 zbór styli. W JavaScript możliwe jest wyciągnięcie tablicy elementów o takiej samej wartości tego atrybutu.

Listing 3
  1. 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.

Listing 4
  1. 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.

Listing 5
  1. 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ść applets

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

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ść embeds

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

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:

Listing 6
  1. var button = document.createElement("BUTTON"); // tworzę w locie nad kukułczym gniazdem przycisk
  2. button.appendChild(document.createTextNode("Przycisk")); // dodaję do niego tekst
  3. var attr = document.createAttribute("id"); // tworzę atrybut id
  4. attr.value = "button"; // przypisuję mu wartość
  5. button.setAttributeNode(attr); // dodaję atrybut do przycisku
  6. document.getElementById("strona").appendChild(button); // dodaję przycisk na stronie
  7. document.getElementById("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.

Komentarze