Właściwości nawigacji DOM są świetne, gdy elementy są blisko siebie. A jeśli nie? Jak uzyskać dowolny element strony?
Są do tego dodatkowe metody wyszukiwania.
document.getElementById lub po prostu id
Jeśli element ma id, możemy pobrać element metodą document.getElementById(id), bez względu na to, gdzie się znajduje.
Na przykład :
Istnieje również zmienna globalna o nazwie id, która odwołuje się do elementu:
… Chyba że zadeklarujemy zmienną JavaScript z wartością ta sama nazwa, to ma pierwszeństwo:
To zachowanie jest opisane w specyfikacja, więc to rodzaj standardu. Ale jest obsługiwany głównie ze względu na kompatybilność.
Przeglądarka próbuje nam pomóc, mieszając przestrzenie nazw JS i DOM. To jest dobre dla prostych skryptów, wbudowanych w HTML, ale generalnie nie jest to dobra rzecz. Mogą występować konflikty nazw. Ponadto, gdy czyta się kod JS i nie ma na widoku HTML, nie jest oczywiste, skąd pochodzi zmienna.
Tutaj w samouczku używamy id aby bezpośrednio odwołać się do elementu w celu zwięzłości, gdy jest oczywiste, skąd pochodzi element.
W rzeczywistości document.getElementById jest metodą preferowaną.
id musi być unikalny Element id musi być niepowtarzalny. W dokumencie może znajdować się tylko jeden element z podanym id.
Jeśli istnieje wiele elementów z tym samym id, wówczas zachowanie metod, które go używają, jest nieprzewidywalne, np document.getElementById może zwrócić dowolny z takich elementów losowo. Dlatego trzymaj się reguły i zachowaj niepowtarzalność id.
document.getElementById, a nie anyElem.getElementById Metodę getElementById można wywołać tylko na document. Szuka podanego id w całym dokumencie.
querySelectorAll
Zdecydowanie najwięcej metoda wszechstronna, elem.querySelectorAll(css) zwraca wszystkie elementy wewnątrz elem pasujące do podanego selektora CSS.
Tutaj szukamy wszystkich <li> elementy, które są ostatnimi dziećmi:
Ta metoda jest naprawdę potężna, ponieważ można użyć dowolnego selektora CSS.
Pseudoklasy w selektorze CSS, takie jak :hover i :active są również utrzymany. Na przykład document.querySelectorAll(":hover") zwróci kolekcję z elementami, nad którymi znajduje się wskaźnik (w kolejności zagnieżdżenia: od najbardziej zewnętrznego <html> do najbardziej zagnieżdżony).
querySelector
Wywołanie elem.querySelector(css) zwraca pierwszy element dla danego CSS selector.
Innymi słowy, wynik jest taki sam jak elem.querySelectorAll(css), ale ten ostatni szuka wszystkich elementów i wybiera jeden, podczas gdy elem.querySelector szuka tylko jednego. Więc zapisywanie jest szybsze i krótsze.
dopasowania
Poprzednie metody przeszukiwały DOM.
Element elem.matches (css) nie szuka niczego , sprawdza jedynie, czy elem pasuje do podanego selektora CSS. Zwraca true lub false.
Metoda jest przydatna, gdy wykonujemy iterację po elementach (np. tablica lub coś) i próbując odfiltrować te, które nas interesują.
Na przykład:
najbliższe
Przodkami elementu są: rodzic, rodzic rodzic, jego rodzic i tak dalej. Przodkowie razem tworzą łańcuch rodziców od elementu do góry.
Metoda elem.closest(css) szuka najbliższego przodka, który pasuje do selektora CSS. Samo elem jest również uwzględniane w wyszukiwaniu.
Innymi słowy, metoda closest przechodzi w górę od element i sprawdza każdego z rodziców. Jeśli pasuje do selektora, wyszukiwanie zostaje zatrzymane, a przodek jest zwracany.
Na przykład:
getElementsBy *
Istnieją również inne metody wyszukiwania dla węzłów według tagu, klasy itp.
Dziś są one głównie historią, ponieważ querySelector jest bardziej wydajne i krótsze do napisania.
Więc tutaj omawiamy je głównie dla kompletności, podczas gdy nadal można je znaleźć w starych skryptach.
-
elem.getElementsByTagName(tag)szuka elementów o podanym i zwraca ich kolekcję. Parametrtagmoże być również gwiazdką"*"dla „dowolnych tagów”. -
elem.getElementsByClassName(className)zwraca elementy, które mają daną klasę CSS. -
document.getElementsByName(name)zwraca elementy z podany atrybutname, obejmujący cały dokument. Bardzo rzadko używane.
Na przykład:
Znajdźmy wszystkie input tagi w tabeli:
"s" list! Początkujący programiści czasami zapominają o literze "s". Oznacza to, że próbują wywołać getElementByTagName zamiast getElementsByTagName.
"s" litera jest nieobecna w getElementById, ponieważ zwraca pojedynczy element. Ale getElementsByTagName zwraca kolekcję elementów, więc wewnątrz znajduje się "s".
Innym powszechnym błędem nowicjusza jest napisanie:
To nie zadziała, ponieważ pobiera zbiór danych wejściowych i przypisuje do niego wartość, a nie do elementów w nim zawartych.
Powinniśmy albo iterować po kolekcji, albo pobrać element według jego indeksu, a następnie przypisać w ten sposób:
Szukam elementów .article:
Aktywne kolekcje
Wszystkie metody "getElementsBy*" zwracają kolekcję na żywo. Takie kolekcje zawsze odzwierciedlają aktualny stan dokumentu i „automatyczną aktualizację” po zmianie.
W poniższym przykładzie są dwa skrypty.
- Pierwszy tworzy odniesienie do zbioru
<div>. Obecnie jego długość wynosi1. - Drugie skrypty uruchamia się, gdy przeglądarka napotka jeszcze jeden
<div>, więc jego długość wynosi2.
W przeciwieństwie , querySelectorAll zwraca kolekcję statyczną. To jest jak stała tablica elementów.
Jeśli zamiast tego użyjemy, oba skrypty wyświetlą 1:
Teraz możemy łatwo zauważyć różnicę. Kolekcja statyczna nie powiększyła się po pojawieniu się nowego div w dokumencie.
Podsumowanie
Istnieje 6 głównych metod wyszukiwania węzłów w DOM:
| Metoda | Wyszukuje według … | Can cal l na elemencie? | Live? |
querySelector |
Selektor CSS | ✔ | – |
querySelectorAll |
Selektor CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
tag lub "*" |
✔ | ✔ |
getElementsByClassName |
class | ✔ | ✔ |
Zdecydowanie najczęściej używane to querySelector i querySelectorAll, ale getElement(s)By* mogą być sporadycznie pomocne lub znaleźć je w starych skryptach.
Poza tym:
- Istnieje
elem.matches(css)aby sprawdzić, czyelempasuje do podanego selektora CSS. - Istnieje
elem.closest(css), aby wyszukać najbliższego przodka, który pasuje podany selektor CSS. Samelemjest również sprawdzany.
Wspomnijmy o jeszcze jednej metodzie sprawdzania relacji dziecko-rodzic, ponieważ czasami jest to przydatne:
-
elemA.contains(elemB)zwraca prawdę, jeślielemBznajduje się wewnątrzelemA(potomekelemA) lub gdyelemA==elemB.