Zrozumienie modelu DOM jest niezbędne w karierze programisty WWW. Powinieneś wiedzieć, jak wybierać różne elementy w DOM, abyś mógł później czytać ich zawartość lub je modyfikować.

Przechodzenie przez DOM opisuje sposób poruszania się po drzewiastej strukturze generowanej przez dokumenty HTML. Oto kompletny przewodnik na temat poruszania się po DOM za pomocą JavaScript.

Co to jest przechodzenie DOM?

The Obiektowy model dokumentu, w skrócie DOM, to drzewiasta reprezentacja dokumentu HTML. Zapewnia API który umożliwia Tobie, jako twórcy stron internetowych, interakcję ze stroną internetową za pomocą JavaScript.

Każdy element w DOM jest znany jako węzeł. Tylko poprzez DOM możesz manipulować strukturą, zawartością i stylem dokumentu HTML.

Przechodzenie DOM (zwane także chodzeniem lub nawigacją po DOM) to czynność polegająca na wybieraniu węzłów w drzewie DOM z innych węzłów. Prawdopodobnie znasz już kilka metod dostęp do elementów w drzewie DOM według ich identyfikatora, klasy lub nazwy znacznika. Możesz skorzystać z metod np document.querySelector() I document.getElementById() to zrobić.

instagram viewer

Istnieją inne metody, których można użyć w połączeniu, aby poruszać się po modelu DOM w bardziej wydajny i niezawodny sposób. Jak możesz sobie wyobrazić, lepiej szukać od znanego już punktu na mapie niż szukać w całości.

Na przykład wybranie elementu podrzędnego od jego rodzica jest łatwiejsze i wydajniejsze niż wyszukiwanie go w całym drzewie.

Przykładowy dokument do przejrzenia

Gdy już uzyskasz dostęp do danego węzła w drzewie DOM, możesz uzyskać dostęp do powiązanych z nim węzłów na różne sposoby. Możesz poruszać się w dół, w górę lub na boki w drzewie DOM z wybranego węzła.

Pierwsza metoda polega na wyszukiwaniu elementu zaczynającego się od najwyższego węzła (jak węzeł dokumentu) i przesuwaniu w dół.

Drugi sposób jest odwrotny: przechodzisz od elementu wewnętrznego w górę drzewa, szukając elementu zewnętrznego. Ostatnią metodą jest wyszukiwanie elementu z innego elementu na tym samym poziomie (co oznacza, że ​​te dwa elementy są rodzeństwem) w drzewie dokumentu.

Aby zademonstrować, rozważ ten przykładowy dokument HTML:

<!DOCTYPE html>
<język html="en">
<głowa>
<zestaw znaków meta="UTF-8" />
<odpowiednik meta http="Kompatybilny z X-UA" zawartość="IE=krawędź" />
<metanazwa="rzutnia" zawartość="szerokość = szerokość urządzenia, skala początkowa = 1,0" />
<tytuł>Przykładowa Strona</title>
</head>
<ciało>
<główny>
<h1>Tytuł mojej strony</h1>
<P>Ładny napis idzie tutaj</P>


<klasa artykułu="Pierwszy artykuł">
<h2>Lista niesamowitych owoców</h2>
<P>Koniecznie jedz owoce</P>


<klasa div="opakowanie-1">
<ul klasa="lista jabłek">
<klasa li="jabłko">Jabłka</li>
<klasa li="Pomarańczowy">Pomarańcze</li>
<klasa li="awokado">Awokado</li>
<klasa li="winogrono">
 Winogrona


<ul>
<klasa li="typ 1">Krople księżyca</li>
<li>Sułtanka</li>
<li>Zgoda</li>
<li>Karmazynowy bez pestek</li>
</ul>
</li>
<klasa li="banan">Banany</li>
</ul>


<klasa przycisku ="btn-1">Przeczytaj pełną listę</button>
</div>
</article>


<klasa artykułu="drugi__artykuł">
<h2>Niesamowite miejsca w Kenii</h2>
<P>Miejsca, które musisz odwiedzić w Kenii</P>


<klasa div="opakowanie-2">
<ul klasa="lista miejsc">
<li>Masaj Mara</li>
<li>Plaża Diani</li>
<li>Plaża Watamu</li>
<li>Park Narodowy Amboseli</li>
<li>Jezioro Nakuru</li>
</ul>


<klasa przycisku ="btn-2">Przeczytaj pełną listę</button>
</div>
</article>
</main>
</body>
</html>

Przechodzenie DOM w dół

Możesz przechodzić przez DOM w dół, używając jednej z dwóch metod. Pierwsza to metoda wspólnego selektora (element.querySelector Lub element.querySelectorAll). Po drugie, możesz użyć tzw dzieci Lub węzły potomne nieruchomość. Istnieją również dwie inne szczególne właściwości, a mianowicie ostatnie dziecko I pierworodny.

Korzystanie z metod selektora

Metody querySelector() umożliwiają wyszukiwanie jednego lub większej liczby elementów pasujących do danego selektora. Na przykład możesz wyszukać pierwszy element za pomocą klasy „first-article”. document.querySelector('.pierwszy-artykuł'). I sprowadzić wszystko h2 elementów w dokumencie, możesz użyć zapytanieSelectorAll metoda: document.querySelectorAll('h2'). The zapytanieSelectorAll metoda zwraca listę węzłów pasujących elementów; możesz wybrać każdy element za pomocą notacji nawiasów:

konst nagłówki = dokument.querySelectorAll('h2');
konst pierwszyNagłówek = nagłówki[0]; // wybór pierwszego elementu h2
konst drugiNagłówek = nagłówki[1]; // wybór drugiego elementu h2

Głównym haczykiem podczas korzystania z metod selektora jest konieczność użycia odpowiednich symboli, jeśli ma to zastosowanie, przed selektorem, tak jak ma to miejsce w CSS. Na przykład „.classname” dla klas i „#id” dla identyfikatorów.

Pamiętaj, że wynikiem będzie element HTML, a nie tylko wewnętrzna zawartość wybranego elementu. Aby uzyskać dostęp do treści, możesz użyć węzła wewnętrzny HTML nieruchomość:

dokument.querySelector('.orange').innerHTML

Korzystanie z właściwości childNodes lub childNodes

The dzieci właściwość wybiera wszystkie elementy podrzędne, które znajdują się bezpośrednio pod danym elementem. Oto przykład z dzieci nieruchomość w akcji:

konst lista jabłek = dokument.querySelector('.apple-list');
konst jabłka = lista jabłek.dzieci; 
konsola.log (jabłka);

Logowanie jabłka do konsoli wyświetli zestaw wszystkich elementów listy bezpośrednio pod elementem z klasą „apple-list” jako kolekcję HTML. Kolekcja HTML jest obiektem przypominającym tablicę, więc do zaznaczania elementów można używać notacji w nawiasach, tak jak w przypadku querySelectorAll.

w przeciwieństwie do dzieci nieruchomość, węzły potomne zwraca wszystkie bezpośrednie węzły potomne (nie tylko elementy potomne). Jeśli interesują Cię tylko elementy potomne, powiedz tylko elementy listy, użyj metody dzieci nieruchomość.

Korzystanie ze specjalnych właściwości lastChild i firstChild

Te dwie metody nie są tak niezawodne jak dwie pierwsze. Jak sugerują ich nazwy, tzw ostatnie dziecko I pierworodny właściwości zwracają ostatni i pierwszy węzeł potomny elementu.

konst lista jabłek = dokument.querySelector('.apple-list');
konst pierwsze dziecko = lista jabłek. pierwsze dziecko;
konst ostatnieDziecko = lista jabłek.ostatnieDziecko;

Przechodzenie przez DOM w górę

Możesz poruszać się w górę DOM za pomocą element nadrzędny (Lub węzeł nadrzędny) I najbliższy nieruchomości.

Używając elementu parentElement lub parentNode

Obydwa element nadrzędny Lub węzeł nadrzędny właściwości pozwalają wybrać węzeł nadrzędny wybranego elementu o jeden poziom wyżej. Krytyczna różnica polega na tym element nadrzędny wybiera tylko węzeł nadrzędny, który jest elementem. Z drugiej strony, węzeł nadrzędny może wybrać rodzica niezależnie od tego, czy jest to element, czy inny typ węzła.

W poniższym przykładzie kodu używamy element nadrzędny aby wybrać div z klasą „wrapper-1” z „apple-list”:

konst lista jabłek = dokument.querySelector('.apple-list');
konst nadrzędnyDiv = appleList.parentElement; 
konsola.log (nadrzędnyDiv); // wyświetla element div z opakowaniem klasy-1

Korzystanie z najbliższej właściwości

The najbliższy właściwość wybiera pierwszy element nadrzędny, który pasuje do określonego selektora. Pozwala wybrać wiele poziomów w górę zamiast jednego. Na przykład, jeśli mamy już wybrany przycisk z klasą „btn-1”, możemy wybrać plik główny element za pomocą najbliższy nieruchomość w następujący sposób:

konst btn1 = dokument.querySelector('.btn-1');
const mainEl = btn1.najbliższy('główny');
konsola.log (głównyEl); // wyświetla główny element

Tak jak zapytanieSelektor I zapytanieSelectorAll, użyj odpowiednich selektorów w pliku najbliższy metoda.

Przemierzanie DOM na boki

Dostępne są dwie metody chodzenia po DOM-ie bokiem. Możesz użyć następny elementRodzeństwo Lub poprzedniElementRodzeństwo. Używać następny elementRodzeństwo, aby wybrać następujący element rodzeństwa i poprzedniElementRodzeństwo aby wybrać poprzednie rodzeństwo.

konst pomarańczowy = dokument.querySelector('.orange');
konst jabłko = orange.previousElementSibling;
konst awokado = orange.nextElementSibling;

Istnieją również odpowiedniki następnyRodzeństwo I poprzedniRodzeństwo właściwości, które również wybierają spośród wszystkich typów węzłów, a nie tylko elementów.

Zrób więcej, łącząc właściwości i metody przechodzenia DOM

Wszystkie powyższe metody i właściwości umożliwiają wybranie dowolnego węzła w DOM. Jednak w niektórych przypadkach możesz chcieć najpierw przesunąć się w górę, a następnie w dół lub w bok. W takim przypadku przydatne okaże się łączenie ze sobą różnych właściwości.