Kurs obiektowego JavaScript (29)

Autor: Damian Chodorek • Opublikowany: 21 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Model DOM. Sposoby nawigowania po węzłach drzewa.

Czym jest DOM? To sposób reprezentacji dokumentów XML lub HTML jako drzewo z węzłami. Jest to API niezależne od języka programowania. Omówienie działania tego modelu nie jest tematem tego kursu, ale omówienie jak działa on w JS już tak.

Czego trzeba się nauczyć?

Załóżmy, że masz stronę WWW. Składa się z kodu HTML (treść) oraz CSS (wygląd). Aby dołożyć jeszcze jeden element do swojej strony – zachowanie, niezbędne są takie umiejętności jak:

  • dostęp do poszczególnych węzłów drzewa,
  • modyfikacja węzłów,
  • tworzenie nowych węzłów,
  • usuwanie węzłów.

Dostęp do węzłów

Zanim będziesz mógł podmieniać obrazki, animować je, reagować na wciśnięcie przycisku lub doklejać HTML w odpowiednim miejscu na stronie, musisz wiedzieć jak dostać się do węzła (elementu), który Cię interesuje.

JS umożliwia nawigowanie po różnych węzłach przy pomocy zapytań oraz gotowych skrótów. Kolejne akapity będą poświęcone właśnie tym metodom.

Zanim zaczniemy, warto abyś wiedział, że wszystkie węzły posiadają trzy bardzo przydatne pola:

  • nodeType – zawiera wartość liczbową, która identyfikuje typ węzła, najbardziej przydatne to: 1 (element), 2 (atrybut), 3 (tekst),
  • nodeName – nazwa węzła,
  • nodeValue – wartość węzła.

Węzeł document

Ten węzeł daje Ci dostęp do całego dokumentu.

document.nodeName; //"#document"
document.nodeType; //9 jest to wartość reprezentująca typ: DOCUMENT_NODE
document.nodeValue; //null

Pole documentElement

Jak wiesz, HTML jest rodzajem dokumentu XML. Każdy taki dokument musi mieć korzeń, który będzie zawierał całą resztę. W przypadku dokumentu HTML jest to tag <html>. Aby dostać się do elementu korzenia należy skorzystać z document.documentElement.

document.documentElement; //<html>
document.documentElement.nodeName; //"HTML"

//to metoda, która zwraca nazwę tagu:
document.documentElement.tagName; //"HTML"

Potomkowie i rodzice

Żeby sprawdzić czy dany element posiada dzieci, należy skorzystać z metody hasChildNodes().

document.documentElement.hasChildNodes(); //true

Pole childNodes odnosi się do wszystkich dzieci danego węzła. Element HTML powinien mieć dwoje potomków: body oraz head.

document.documentElement.childNodes.length; //2, czyli ile potomków ma element HTML
document.documentElement.childNodes[0]; //<head> - odnosimy się do pierwszego potomka
document.documentElement.childNodes[1]; //<body> - odnosimy się do drugiego potomka

W zależności od danej strony, tablica childNodes może posiadać więcej potomków.

Wiesz już jak dostać się do potomków/dzieci danego węzła. Aby dostać się do rodzica należy skorzystać z pola parentNode.

document.documentElement.childNodes[0].parentNode; //<html>
/*skoro potomkiem elementu html jest head, to rodzicem head musi być html*/

UWAGA! Przeanalizuj poniższy kod i odpowiedz na pytanie: ile potomków będzie mieć element body?

<body>
  <p class="beg" >akapit 1</p>
  <p><em>akapit</em> 2</p>
  <p id="end" >akapit 3</p>
  <!-- jakiś HTML'owy komentarz -->
</body>

Odpowiedź: 9. Jak to? Przecież widzisz 3 paragrafy i komentarz. Po pierwsze komentarze w HTML’u również liczą się jako oddzielne węzły. Po drugie każdy znak (nawet biały) też liczy się jako węzeł (tekstowy). W związku z tym mamy 3 elementy p, 1 komentarz, 1 znak nowego wiersza pomiędzy body i p, znak nowego wiersza pomiędzy ostatnim p oraz zamknięciem body, a także 3 znaki nowego wiersza pomiędzy poszczególnymi elementami p. W sumie 9.

Atrybuty elementów

Aby sprawdzić czy dany element posiada jakieś atrybuty, korzystamy z metody hasAttributes(). Przy pomocy pola attributes odnosimy się do tablicy atrybutów, a attributes.length zwraca ich ilość w danym elemencie.

var bd=document.documentElement.childNodes[1]; //zakładamy, że to element body
var p1=bd.childNodes[1]; /*pod 0 kryje się biały znak, jest to pierwszy element p z wcześniejszego przykładu*/
p1.hasAttributes(); //true

//ile atrybutów:
p1.attributes.length; //1

//nazwa i wartość atrybutu
p1.attributes[0].nodeName; //"class"
p1.attributes[0].nodeValue; //"beg"

//wartość atrybutu po jego nazwie:
p1.attributes['class']; //class="beg"
p1.getAttribute('class'); //"beg"

Dostęp do zawartości węzła

W większości przeglądarek pole textContent zwraca zawartość tekstową węzła. Nie działa jednak w IE. Zamiast niego istnieje innerText

p1.textContent; //"akatip 1"

Istnieje również bardzo przydatne pole innerHTML, które zwraca cały kod HTML znajdujący się w danym węźle jako tekst. Nie jest to częścią standardu DOM, ale istnieje we wszystkich poważnych przeglądarkach. Jest to trochę niekonsystentne z DOM, ponieważ zostanie zwrócony tekst uwzględniający kod HTML, a nie tylko faktyczną treść. Niemniej, pole jest na tyle przydatne, że korzysta się z niego bardzo często.

p1.innerHTML; //"akapit 1"

Jeśli chodzi o akapit 1, to nie widać żadnej różnicy w użyciu innerHTML oraz textContent. Spójrz jednak co się stanie w przypadku akapitu 2.

bd.childNodes[3].innerHTML; //"<em>akapit</em> 2"
bd.childNodes[3].textContent; //"akapit 2"

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (30)

Zobacz również
Kurs obiektowego JavaScript (27)Jak dołączyć kod JS do strony HTML? Poznaj modele BOM i DOM.
Kurs obiektowego JavaScript (28)Dokładniejsze omówienie modelu BOM. Obiekt window.
Kurs obiektowego JavaScript (30)Funkcje skrótowe. Edycja elementów DOM.
Kurs obiektowego JavaScript (31)Wstawianie, usuwanie i zamiana węzłów.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.