logo

Relacje między elementami DOM

Z artykułu dotyczącego struktury DOM poznaliśmy hierarchiczne drzewo elementów (węzłów) struktury DOM. Zobaczmy jakie zachodzą relacje miedzy tymi elementami. Poniższa ilustracja przedstawia relacje wobec węzła p (patrz też przykład 1).

relacje między elementami DOM

W relacjach między węzłami możemy mówić o:

  • byciu rodzicem w stosunku do innego węzła (właściwość parentNode) - gdy jest to element nadrzędny w stosunku do innego elementu w drzewiastej strukturze hierarchicznej DOM,
  • byciu dzieckiem w stosunku do innego elementu węzła (właściwość childNodes) - gdy jest to element podrzędny w stosunku do innego w drzewiastej strukturze hierarchicznej DOM
  • byciu pierwszym (właściwość firstChild) lub ostatnim (właściwość lastChild) dzieckiem rodzica lub n-tym dzieckiem innego węzła (właściwość childNodes[n]).

Oto lista właściwości węzłów.

Właściwości węzłów

W poniższej tabeli zostały zawarte niektóre właściwości przypisanych do węzłów (nodes).

WłaściwośćOpis
nodeNameWskazuje na nazwę węzła (zobacz przykład 1).
nodeValueDla węzłów typu tekstowego (#text) wskazuje na zawartość tego węzła (zobacz przykład 1).
textContentJak wyżej. (zobacz przykład 1).
nodeTypeWskazuje na typ węzła: 1 - element HTML, 2- atrybut, 3 - tekst, 4- sekcja CDATA, 6 - encja, 8 - komentarz, 9 - dokument, 10 - dokument definicji.
parentNode, parentElementWskazuje na rodzica, o ile istnieje (przykład 1).
childrenLista dzieci.
firstChildWskazuje na pierwsze dziecko w hierarchii (przykład 1).
lastChildWskazuje na ostatnie dziecko w hierarchii (przykład 1).
previousSiblingOdnosi się do poprzedniego węzła tego samego poziomu.
attributesZwraca listę atrybutów elementu.
setAttribute('nazwa','wartość')Ustawia atrybut węzła dla nazwy zgodnej z CSS (np. style) o wartości podanej jako drugi parametr. (Zobacz przykład 2).
hasAttributeZwraca wartość true, jeżeli dla węzła zostały zdefiniowane atrybuty
childelementCountZwraca liczbę węzłów dzieci.
removeAttributeUsuwa atrybuty dla danego elementu.

A jak sie odnieść do rodzica rodzica rodzica rodzica? Zobacz poniższy przykład w ostatniej linii kodu pierwszego przykładu.

Przykład 1

Skupmy się na jednym akapicie tekstu.

Akapit - fragment kodu HTML

<body>
<p id="identyfikator">
To jest <strong>ważny</strong> tekst w tym akapicie.
</p>
</body>

Poniżej widać wynik działania powyższego kodu:

To jest ważny tekst w tym akapicie.


Skrypt wyświetlający wartości nodeName i nodeValue dla węzłów

<script>
var n = document.getElementById("identyfikator");	
alert('Rodzicem elementu <p> jest: '+n.parentNode.nodeName); alert('Właściwość firstChild elementu <p> jest: '+n.lastChild.nodeName+'\n o wartości: '+ n.firstChild.nodeValue); alert('Właściwość lastChild elementu <p> jest: '+n.lastChild.nodeName+'\n o wartości: '+ n.lastChild.nodeValue);
alert('Właściwość childNodes[0] elementu <p> jest: '+n.childNodes[0].nodeName+'\n o wartości: '+ n.childNodes[0].textContent); alert('n.parentNode.parentNode.parentNode.parentNode.nodeName jest: ' +n.parentNode.parentNode.parentNode.parentNode.nodeName); </script>
Lupa

Przykład 2 - Atrybuty

Skupmy się teraz na liście nieuporządkowanej w obiekcie div, którą definiujemy w HTML tak.

Akapit - fragment kodu HTML

<div style="background-color:#eef; width="200px;">
<ul id="lista">
 <li>pierwsza pozycja</li>
 <li>druga pozycja listy</li>
</ul>
</div>

Poniżej widać wynik działania powyższego kodu:

  • pierwsza pozycja
  • druga pozycja listy

Skrypt z wykorzystaniem setAttribute

Dzięki poniższemu skryptowi zmienimy styl obramowania dla listy nieuporządkowanej <ul>. Znajdujemy listę po id (u nas id="lista"). Element <div> jest rodzicem dla listy <ul>, więc dla naszego elementu odwołujemy się do rodzica poprzez parentNode i ustawiamy nową definicję stylu dla rodzica - setAttribute('style','background-color:#abc; width: 300px; margin:10px; padding:7px;')

Poniżej cały kod, który po naciśnięciu lupy zadziała na naszym obiekcie.

<script>
var x = document.getElementById("lista");
x.parentNode.setAttribute('style','background-color:#abc; width: 300px; margin:10px; padding:7px;');
</script>
Lupa



© medianauka.pl, 2016-11-01, ART-3281

Inne zagadnienia z tej lekcji

Document Object Model - DOM

Document Object Model - DOM

Opis hierarchii dokumentu HTML. Oprócz tego, że przeglądarka wczytuje i wyświetla zawartość dokumentu HTML z użyciem arkuszy stylów CSS, dodatkowo zapamiętuje MODEL danego dokutemu.

Pobieranie elementów DOM

Pobieranie elementów DOM

W jaki sposób w JavaScript można pobierać i modyfikować elementy struktury DOM strony internetowej? Służą do tego cztery właściwości w JavaScript: getElementById, getElementByTagName, querySelector i querySelectorAll.

Tworzenie i usuwanie elementów

Tworzenie i usuwanie elementów

Opis metod tworzenia i usuwania węzłów w dokumencie HTML przy użyciu JavaScript. W tym artykule pokazuję, jak stworzyć, usunąć albo podmienić element strony internetowej.

Modyfikowanie elementów

Modyfikowanie elementów

Opis metod modyfikowania elementów strony przy użyciu JavaScript. W tym artykule pokazuję kilka metod modyfikacji elementów strony internetowej z poziomu skryptu.







Polecamy w naszym sklepie

50 idei, które powinieneś znać - Nauki ścisłe
Mapa świata Puzzle
Kolorowe skarpetki Kostka
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Miasto
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2022 r.