JavaScript DOM: Manipulacja i Traversing

Wybieranie elementów DOM, zmienianie treści i atrybutów, poruszanie się po drzewie DOM.

Wprowadzenie

Kiedy pracujemy z stronami internetowymi, często napotykamy na potrzebę modyfikowania istniejących elementów, dodawania nowych treści, czy też poruszania się po strukturze strony internetowej. W tym kontekście, znajomość Modelu Obiektowego Dokumentu (DOM) w JavaScript jest niezwykle ważna.

DOM jest reprezentacją strony HTML w postaci struktury drzewiastej, która umożliwia interakcję i manipulację stroną za pomocą JavaScriptu. Każdy element strony, taki jak tagi HTML, tekst, a nawet atrybuty, staje się „węzłem” w tym drzewie. Dzięki DOM, możemy programowo czytać, modyfikować, dodawać lub usuwać elementy z drzewa, co skutkuje zmianami w wyświetlanej stronie.

Wybieranie Elementów DOM

Zacznijmy od podstaw – wybierania elementów. To klucz do manipulacji stroną. Możemy to robić na kilka sposobów:

• getElementById(): Gdy znamy ID elementu.

let naglowek = document.getElementById('naglowek');

• getElementsByName(): Gdy szukamy po atrybucie name

document.getElementsByName("nazwa"); 
// Zwraca element który posiada atrybut name i równa się on "nazwa"

• getElementsByClassName(): Gdy szukamy elementów o określonej klasie.

let przyciski = document.getElementsByClassName('przycisk');
// Zwraca tablicę obiektów które maja przypisaną daną klasę

• querySelector() i querySelectorAll(): Do bardziej złożonych selektorów, podobnych do CSS.

let pierwszyPrzycisk = document.querySelector('.przycisk');
// Zwróci pierwszy element który znajdzie z klasa przycisk

let wszystkiePrzyciski = document.querySelectorAll('.przycisk');
// Zwróci wszytskie elementy z klasa przycisk

querySelector() – Zwraca pierwszy element który spełnia dany selektor
querySelectorAll() – Zwraca wszystkie elementy, które spełniają dany selektor

Zmienianie Treści i Atrybutów

Gdy już wybierzemy element, możemy zmienić jego treści lub atrybuty. Na przykład:

• Zmiana treści:

let naglowek = document.getElementById('naglowek');
naglowek.textContent = 'Nowy Nagłówek';

// lub

let opis = document.getElementById('opis');
opis.innerHTML = 'Nowy, bardziej szczegółowy opis.';

Gdy używamy innerHTML() możemy również dodać kod HTML np.

let opis = document.getElementById('opis');
opis.innerHTML = 'Nowy, <b>bardziej szczegółowy</b> opis.<br>Druga <i>Linia</i>';

• Zmiana atrybutów:

let zdjecie = document.querySelector('.zdjecie');
zdjecie.setAttribute('width', '100px');

Po wykonaniu takiego kodu szerokość pierwszego elementu o klasie zdjecie zostanie ustawiona na 100px

Poruszanie się po Drzewie DOM

Poruszanie się po drzewie DOM (Document Object Model) w JavaScript jest kluczową umiejętnością dla każdego, kto chce tworzyć interaktywne strony internetowe. W tej sekcji wpisu przyjrzymy się najważniejszym metodom i technikom, które umożliwiają efektywne manipulowanie i dostęp do elementów strony.

• Dzieci (children)
  Załóżmy, że mamy następującą strukturę HTML:

<div id="naglowek">
  <h1>Tytuł</h1>
  <p>Opis</p>
  <ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
  </ul>
</div>

let naglowek = document.getElementById('naglowek');
let dzieci = naglowek.children;

// Ten kod zwróci elementy: <h1>, <p> i <ul>

• Pierwsze i Ostatnie dziecko (firstChild i lastChild)

<div id="rodzic">
  <p>Pierwszy akapit</p>
  <p>Drugi akapit</p>
  <p>Trzeci akapit</p>
</div>
let rodzic = document.getElementById("rodzic");

let pierwszeDizecko = parentElement.firstChild;
// Zwróci <p>Pierwszy akapit</p>

let ostatnieDizecko = parentElement.lastChild;
// Zwróci <p>Trzeci akapit</p>

• Rodzic (parentElement i parentNode)
  Zakładając, że pracujemy nad tym samym fragmentem HTML. Jeśli chcemy znaleźć rodzica elementu <li>:

<ul>
  <li id="punkt1">Punkt 1</li>
</ul>
let punkt1 = document.getElementById('punkt1');
let rodzic = punkt1.parentElement;

// Zwróci to element <ul>, który jest rodzicem elementu <li>

• Rodzeństwo (nextElementSibling i previousElementSibling)
  Jeśli chcemy znaleźć rodzeństwo dla elementu <li>:

<li id="punkt1">Punkt 1</li>
<li>Punkt 2</li>
let punkt1 = document.getElementById('punkt1');


let nastepny = punkt1.nextElementSibling;
// Zwróci <li>Punkt 2</li>

let poprzedni = punkt1.previousElementSibling;
// Zwróci null, ponieważ "Punkt 1" nie ma poprzedniego rodzeństwa

Zakończenie

Manipulacja i przemieszczanie się po DOM może początkowo wydawać się trudne, ale z czasem staje się naturalną częścią tworzenia stron internetowych. Pamiętaj, że praktyka czyni mistrza, więc najlepiej jest eksperymentować z różnymi metodami i zobaczyć, jak działają na żywo na Twojej stronie.

Mam nadzieję, że ten wpis był pomocny. Baw się dobrze eksplorując i manipulując DOM!