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 selektorKolejną 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.
