Dokumentowy model obiektowy (DOM) jest interfejsem programistycznym dla dokumentów HTML i XML tworzonych przez przeglądarkę po załadowaniu dokumentu. Strona internetowa jest w istocie dokumentem reprezentowanym przez DOM jako węzły i obiekty. Pozwala on programom na manipulowanie zawartością, strukturą i stylami dokumentu.

W tym poradniku nauczymy się, jak używać JavaScriptu, aby uzyskać dostęp do różnych węzłów (elementów HTML) w DOM. Zacznijmy od pierwszej metody: uzyskania elementu według ID.

Get Element By ID

Metoda document’s getElementById() przyjmuje ID elementu jako dane wejściowe i zwraca obiekt Element reprezentujący element DOM. Oto przykład:

<div>🦄</div>

Teraz oto jak możemy uzyskać powyższy element <div> używając jego ID:

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

W rozróżnianiu wielkości liter i unikalny w całym dokumencie HTML. Dlatego ta metoda zawsze zwraca pojedynczy element. Jeśli nie zostanie znaleziony pasujący element, zwraca null.

Uwaga: Nie umieszczaj znaku # przed ciągiem ID podczas wywoływania metody getElementById(). Otrzymasz null zamiast elementu, a potem możesz się zastanawiać godzinami, co poszło nie tak.

Get Elements By Tag Name

Metoda getElementsByTagName() służy do uzyskiwania dostępu do wielu elementów. Pobiera ona nazwę znacznika jako dane wejściowe i zwraca wszystkie elementy DOM, które pasują do nazwy znacznika jako HTMLCollection:

<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>

Kod JavaScript, aby uzyskać dostęp do wszystkich elementów <p>:

const animals = document.getElementsByTagName('p');

Ta metoda przeszukuje tylko jedną nazwę znacznika na raz. Ale jeśli podasz * jako nazwę tagu, otrzymasz wszystkie elementy w DOM:

const allNodes = document.getElementsByTagName('*');

Get Elements By Name

Metoda getElementsByName() służy do uzyskania kolekcji elementów według ich atrybutu name i zwraca obiekt NodeList:

<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">

Pozwól nam uzyskać wszystkie elementy o nazwie email:

const emails = document.getElementsByName('email');

Uwaga: W przeciwieństwie do atrybutu id, który musi być unikalny, wiele elementów HTML może mieć ten sam atrybut name. Właśnie dlatego getElementsByName() zwraca kolekcję węzłów.

Get Elements By Class Name

Chcesz użyć atrybutu class, aby uzyskać listę pasujących elementów? Możesz użyć metody getElementsByClassName(), wystarczy, że przekażesz jej nazwę klasy (bez .), a zwróci ona HTMLCollection wszystkie elementy DOM, które mają podaną nazwę klasy:

<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>

Pozwól nam uzyskać wszystkie elementy bird’s:

const birds = document.getElementsByClassName('bird');

Ta metoda akceptuje również wiele nazw klas oddzielonych spacjami. Pobierzmy wszystkie elementy, które posiadają zarówno klasę bird jak i eagle:

const eagle = document.getElementsByClassName('bird eagle');

Selektor zapytań

Metoda querySelector() jest jedną z dwóch nowoczesnych metod JavaScript, które pozwalają na pobieranie elementów z DOM, na podstawie selektorów CSS. Wystarczy przekazać selektor CSS, a otrzymasz pierwszy element, który pasuje do podanego selektora. Jeśli nie ma żadnych dopasowań, zwraca null. Oto przykład:

const email = document.querySelector('#signup input');

Pytanie o selektor All

Chcesz wybrać listę elementów, które pasują do podanych selektorów? Zamiast tego użyj metody querySelectorAll(). Metoda ta przyjmuje wiele selektorów CSS jako dane wejściowe i zwraca NodeList – listę elementów DOM, które pasują do podanych selektorów. Wybierzmy wszystkie elementy z klasą bird lub animal z powyższego znacznika HTML:

const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4

Połączenie funkcji

Możesz również połączyć wiele funkcji razem, aby wyszukać elementy wewnątrz innego elementu. Najpierw musisz wybrać pojedynczy element, używając albo getElementById() lub querySelector(), a następnie łańcuch innej funkcji do wyszukiwania wewnątrz:

<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>

Zdobądź wszystkie elementy input, wewnątrz elementu, który ma identyfikator signup:

const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');

Traversing HTMLCollection and NodeList

Większość metod, które omówiliśmy powyżej (z wyjątkiem getElementById() i querySelector()) zwraca wiele elementów jako albo HTMLCollection albo NodeList.

HTMLCollection nie jest tablicą, ale ogólną kolekcją elementów. Nie można więc po nim iterować za pomocą forEach() lub map(). Możemy jednak przekonwertować go na prawdziwą tablicę, a następnie iterować za pomocą metody Array.from():

const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});

Aczkolwiek NodeList również nie jest tablicą, ale zapewnia metodę forEach() do iterowania po elementach:

const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});

Podsumowanie

To już wszystko jeśli chodzi o uzyskiwanie elementów DOM za pomocą JavaScript. Poznaliśmy tak wiele różnych metod dostępu do elementów DOM: używając atrybutu id, nazwy znacznika HTML, atrybutu name, atrybutu class oraz selektorów CSS. Omówiliśmy również sposoby iteracji po generycznej kolekcji elementów zwracanych przez te metody.

✌️ Podoba Ci się ten artykuł? Śledź @attacomsian na Twitterze. Możesz również śledzić mnie na LinkedIn i DEV. Subskrybuj kanał RSS.

👋 Jeśli lubisz czytać moje artykuły i chcesz mnie wesprzeć w dalszym tworzeniu darmowych tutoriali, ☕ Kup mi kawę (koszt 5$) .