DOM w JavaScripcie: czym jest i jak go modyfikować

Ten artykuł może być aktualizowany

Jeśli masz pytania albo uwagi, śmiało zostaw komentarz.

Document

Węzeł document to punkt wyjścia: właśnie z niego dostajesz się do wszystkich elementów DOM-u. Reprezentuje przy tym obiekt Document, który udostępnia różne metody dostępu do elementów. ( np. document.querySelector(‘div.exemple’); )

Element

Elementy HTML opisują strukturę strony. Wejście w drzewo DOM zaczyna się od wyszukania elementów przez Document. Kiedy znajdziesz ten, o który ci chodziło, masz z niego dostęp do jego węzłów tekstowych i węzłów atrybutów.

Atrybut

Znaczniki otwierające elementów HTML mogą zawierać atrybuty ( na przykład id, class, … ), a te są w drzewie DOM reprezentowane przez węzły atrybutów. Węzły atrybutów nie są dziećmi elementu, który je nosi: są jego częścią i same nie mogą mieć dzieci. Kiedy masz już dostęp do elementu, do odczytu i zmiany jego atrybutów służą osobne metody i właściwości JavaScriptu.

Tekst

Tak jak do węzła atrybutu, do węzła tekstowego dostajesz się przez węzeł elementu, i tak samo jak węzły atrybutów, węzły tekstowe nie mogą mieć dzieci.

Dostęp do elementów

---

Żeby zmienić element, trzeba najpierw do niego dotrzeć. Służy do tego cały zestaw metod, którymi porusza się po DOM-ie i go modyfikuje.

Wybór jednego elementu

• getElementById(): daje dostęp do elementu po jego atrybucie ID.
• querySelector(): zwraca element pasujący do selektora CSS.

Wybór wielu elementów

Te metody zwracają elementy w postaci tablicy

• getElementsByClassName(): zwraca elementy o zadanej klasie.
• getElementsByTagName(): zwraca elementy o zadanym znaczniku HTML ( np. <div> ) .
• querySelectorAll(): zwraca elementy pasujące do selektora CSS.

Przechodzenie między węzłami

• parentNode: zwraca element nadrzędny bieżącego elementu.
• childNodes: zwraca listę dzieci bieżącego elementu.
• previousSibling: zwraca poprzedni węzeł na tym samym poziomie.
• nextSibling: zwraca następny węzeł na tym samym poziomie.
• firstChild: zwraca pierwsze dziecko bieżącego elementu.
• lastChild: zwraca ostatnie dziecko bieżącego elementu.

Praca z atrybutami

---

Kiedy masz już element, masz też dostęp do jego atrybutów i ich wartości, a do zmiany służy kilka metod.

id

• id: odczytuje albo ustawia id elementu

Klasa

• className: odczytuje albo ustawia klasę elementu.
• classList: zwraca listę klas elementu
• add: dodaje klasę do listy
• remove: usuwa klasę z listy
• toggle: przełącza klasę (dodaje ją, jeśli jej nie ma, i usuwa, jeśli jest).
• contains: zwraca wartość logiczną true, jeśli klasa jest na liście.

Atrybuty w ogólności

• hasAttribute(): zwraca wartość logiczną true, jeśli bieżący element ma dany atrybut.
• getAttribute(): zwraca wartość wskazanego atrybutu.
• setAttribute(): dodaje elementowi atrybut, a jego wartość podajesz w drugim argumencie.
• removeAttribute(): usuwa atrybut z elementu.

Dostęp do wartości

• nodeValue: zwraca zawartość węzła, dla akapitu będzie to jego tekst, a jeśli węzeł jest atrybutem, wartość tego atrybutu.
• innerText: pobiera sam tekst, bez znaczników.
• innerHTML: pobiera tekst razem ze znacznikami węzła.
• textContent: pobiera tekst tak jak innerText, ale zwraca też zawartość <script> i <style>, czego innerText nie robi.

Dodawanie elementu w trzech krokach

---

Jedną z najważniejszych rzeczy przy pracy z DOM-em jest tworzenie nowych elementów. Kompletny element budujesz w trzech krokach:

1. createElement(): zaczynasz od utworzenia nowego węzła elementu metodą createElement(). Ten węzeł zapisujesz w zmiennej.
   javascriptKopiuj

   var element= document.createElement("p");

2. createTextNode(): createTextNode() tworzy nowy węzeł tekstowy. Znowu trafia on do zmiennej i można go dołożyć do węzła elementu metodą appendChild().
   javascriptKopiuj

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild(): masz już element, z treścią w węźle tekstowym albo bez niej, więc tą metodą wstawiasz go do drzewa DOM.
   javascriptKopiuj

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

Metoda write

Może obiło ci się o uszy, że znaczniki i tekst da się wstawić do dokumentu metodą document.write. Ta metoda ma jednak sporo wad i sprawia kłopoty: działa tylko przy pierwszym ładowaniu strony, a wywołana później potrafi:

• nadpisać całą stronę
• nie dodać treści do strony
• utworzyć nową stronę

Usuwanie elementu w trzech krokach

---

Tak jak elementy się do DOM-u dodaje, czasem trzeba je z niego usunąć.

1. Najpierw zapisz w zmiennej element, który chcesz usunąć.
   javascriptKopiuj

   var removeElement= document.getElementById('monId');

2. Następnie z tej zmiennej sięgnij po element nadrzędny przez właściwość parentNode.
   javascriptKopiuj

   var parentElement = removeElement.parentNode;

3. Mając tę drugą zmienną, usuniesz element zapisany w pierwszym kroku.
   javascriptKopiuj

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);