Javascript – manipulacja DOM

article-thumbnail

Wiemy, że javascript pozwala nam uchwycić elementy kodu HTML m.in za pomocą własności id. Nasuwa więc się pytanie, skąd JS w ogóle wie co znajduje się na stronie internetowej? Na to pytanie odpowie zrozumienie koncepcji DOM. Ten skrót oznacza Document-Object-Model. Jest to reprezentacja naszej strony internetowej w postaci obiektowego drzewa logicznego. Brzmi skomplikowanie. Najprościej rzecz ujmując, cały kod HTML jest przechowywany w formie pewnej struktury danych jako obiekty. Javascript potrafi wyciągną z nich potrzebne informacje, a następnie je przetworzyć.

Poznaliśmy już podstawowy uchwyt jakim jest document.getElementById(), za jego pomocą pobieraliśmy jeden konkretny obiekt z DOM’u. Możemy jednak użyć innych uchwytów. Poniżej zamieszczam kilka najbardziej popularnych i użytecznych metod. 

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

document.activeElement ;
//Aktywnie wybrany element

document.getElementsByName("nazwa"); 
//Zwraca element który posiada atrybut name

document.getElementsByTagName("nazwa tagu HTML") 
//Zwraca listę elementów

document.querySelector("dowolny selektor");
//Zwraca pierwszy element który spełnia dany selektor

document.querySelectorAll("dowolny selektor");
//Zwraca wszystkie elementy, które spełniają dany selektor

Kolejną rzeczą, jaką możemy zmodyfikować w DOM, jest dodanie tzw. słuchaczy. Są to funkcje reagujące na dane zdarzenie. Najczęściej nasłuchuje się trzech z nich – onClick, onLoad oraz onChange. Ogółnie dodanie słuchacza polega na użyciu metody addEventListener(). Przyjmuje ona dwa argumenty. Pierwszym z nich jest nazwa zdarzenia, a drugim jest funkcję jaka ma się wykonać. Nazwy zdarzeń są dosyć intuicyjne. Oto kilka z nich:

  • ’click’ – występuje w momencie naciśnięcia myszką na element.
  • ’load’ – występuje gdy obiekt zostanie załadowany.
  • ’select’ – występuje gdy użytkownik wybierze dany element np. <input/>.
  • ’change’ – występuje gdy zawartość elementu ulegnie zmianie.
  • ’abort’ – występuje gdy nie można załadować elementów np. brak grafiki czy wideo.

Natomiast sama implementacja wygląda tak:

<button > Kliknij Mnie</button>

<script>
  document.querySelector('button').addEventListener('click', ()=>alert("kliknięto mnie"));
</script>

Kolejną rzeczą jaką możemy zmienić w DOM’ie jest dopisanie czegoś do danego pola. Np.

<script>
document.write(`<input type="text" value="Wygenerowany"/>`);
</script>

Edycja DOM jest bardzo złożonym tematem, dlatego zachęcam do doczytania o interesujących nas zagadnienia.

Sebastian Nosal

Ostatnio zaktualizowane: 21 października 2022

Egzamin EE.09, Egzamin INF.03, JavaScript