Manipulacja DOM w JavaScripcie: jak zmieniać stronę HTML

DOM (Document Object Model) to sposób przedstawienia elementów dokumentu HTML jako obiektów, którymi da się sterować z poziomu JavaScriptu. Oznacza to, że gdy używasz JavaScriptu do pracy z DOM-em, możesz dodawać, usuwać i zmieniać elementy HTML swojej strony albo po prostu się do nich dostawać.

W tym przykładzie posłużymy się poniższym kodem HTML, żeby pokazać różne techniki manipulacji DOM-em:

<div id="container">
  <h1 class="title">Mon titre</h1>
  <p class="description">Ma description</p>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
  </ul>
</div>

Wybieranie węzłów DOM

Żeby manipulować DOM-em, trzeba najpierw wybrać węzły, które chcesz zmienić. W JavaScripcie jest na to kilka metod:

• Metoda document.getElementById wybiera węzeł po jego ID. Na przykład diva o ID „container” wybierzesz taką składnią:

const container = document.getElementById('container');

• Metoda document.getElementsByClassName zwraca listę węzłów o zadanej klasie. Na przykład wszystkie elementy li o klasie „item” wybierzesz tak:

const items = document.getElementsByClassName('item');

• Metoda document.querySelector zwraca pierwszy węzeł pasujący do selektora CSS. Na przykład pierwszy element li z listy wybierzesz tak:

const firstItem = document.querySelector('li');

Ta metoda zwraca pierwszy element pasujący do podanego selektora. Jeśli nic nie znajdzie, zwróci null.

• Metoda document.querySelectorAll działa podobnie, ale zwraca tablicę wszystkich węzłów pasujących do podanego selektora. Na przykład:

const items = document.querySelectorAll('li');

Ta metoda wybiera wiele elementów naraz. Możesz je przejść pętlą, dokładnie tak jak w rozdziale o pętlach.

Jeśli przerabiałeś rozdział o pętlach, warto wiedzieć, że na wyniku document.querySelectorAll('li') zadziała metoda forEach obiektu Array. Robi się to tak:

document.querySelectorAll('li').forEach(function(li) {
  // Kod wykonywany dla każdego elementu li
});

Ten kod wybierze wszystkie elementy li na stronie i wykona dla każdego z nich określony fragment kodu. Jeśli na przykład chcesz podpiąć zdarzenie „click” do każdego elementu li, użyj tego:

document.querySelectorAll('li').forEach(function(li) {
  li.addEventListener('click', function() {
    console.log("L'élément li a été cliqué !");
  });
});

Zamiast funkcji anonimowej możesz też użyć funkcji strzałkowej:

document.querySelectorAll('li').forEach(li => {
  li.addEventListener('click', () => {
    console.log("L'élément li a été cliqué !");
  });
});

• Elementy da się również wybierać po ich identyfikatorach lub klasach, dokładnie tak jak w CSS. Na przykład:

const container = document.querySelector('#container');
const title = document.querySelector('.title');

Ta składnia pozwala wybierać elementy po identyfikatorze albo po klasie. Przydaje się, gdy chcesz zająć się w JavaScripcie konkretnie tymi elementami.

Istnieje wiele innych sposobów wybierania elementów w DOM-ie z poziomu JavaScriptu, ale te metody są używane najczęściej i stanowią dobrą bazę na początek.

Modyfikowanie DOM-u w JavaScripcie

Skoro znasz już różne sposoby na wyciągnięcie konkretnego elementu z kodu HTML, zobaczmy, jak modyfikować DOM: dodawać treść, zmieniać tekst albo style.

Dodawanie HTML-a w JavaScripcie

HTML dodasz do elementu DOM właściwością innerHTML. Na przykład, żeby dopisać element na końcu listy:

const ul = document.querySelector('ul');
ul.innerHTML += '<li class="item">Item 4</li>';

Dodawanie nowego elementu w JavaScripcie

Możesz też utworzyć nowy element i dołączyć go do elementu DOM metodą appendChild. Na przykład, żeby dopisać element na końcu listy:

const ul = document.querySelector('ul');
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = 'Item 4';
ul.appendChild(newItem);

Zmiana tekstu elementu w JavaScripcie

Tekst elementu zmienisz właściwością textContent. Na przykład, żeby zmienić tekst tytułu:

const title = document.querySelector('.title');
title.textContent = 'Nouveau titre';

Dodawanie CSS do elementu w JavaScripcie

Możesz dodać CSS do elementu DOM właściwością style. Na przykład, żeby ustawić akapit na czerwony i pogrubiony:

const p = document.querySelector('p');
p.style.color = 'red';
p.style.fontWeight = 'bold';

Do dodania CSS możesz też użyć metody setAttribute. Na przykład:

const p = document.querySelector('p');
p.setAttribute('style', 'color: red; font-weight: bold;');

Podsumowanie

Istnieje wiele innych sposobów na zmianę CSS-a elementu DOM z poziomu JavaScriptu, ale te metody są używane najczęściej i stanowią dobrą bazę na początek.

Poza stylami możesz zmieniać także inne aspekty elementu DOM: jego zawartość HTML albo tekstową, a także podpinać do niego zdarzenia, kliknięcie, najechanie kursorem i tak dalej.

W następnym rozdziale zajmiemy się zdarzeniami w JavaScripcie i pracą z nimi.