Podsumowanie: Dostęp do elementów DOM

Jakich metod możemy użyć?

Pokazaliśmy, jak możesz użyć poniższych metod do odnalezienia elementu lub elementów na twojej stronie internetowej:

Co zwracają?

Są dwie metody, które zwracają pojedyńczy element, getElementById i querySelector:

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Matma jest świetna";

Metody getElementsByClassName i getElementsByTagName zwracają kolekcję HTMLCollection, która zachowuje się jak tablica. Ta kolekcja jest "żywa", co oznacza, że jest automatycznie aktualizowana, jeśli dodatkowe elementy z tym znacznikiem lub klasą zostaną dodane do dokumentu.

var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}

Metoda querySelectorAll() zwraca listę wystąpień, która działa jak tablica. Ta lista jest "statyczna", co oznacza, że nie zostanie zaktualizowana, gdy jakikolwiek pasujący element zostanie dodany do strony. Najprawdopodobniej, nie odczujesz różnicy między tymi dwoma typami danych, gdy będziesz używał metod, ale dobrze jest o tym wiedzieć.

var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}

Dostęp do pod-zapytań

Gdy już znajdziesz element, możesz wykonywać na nim różne operacje używając metod, które widziałeś powyżej. Na przykład:

// znajdź element z tym ID
var salsMotto = document.getElementById("salsMotto");
// znajdź wszystkie znaczniki span wewnątrz tego elementu:
var mottoWords = salsMotto.getElementsByTagName("span");
// wypisz ile ich jest
console.log(mottoWords.length);

Przechodzenie przez DOM

Inną metodą na dostęp do elementów jest "przechodzenie" przez drzewo DOM. Każdy element ma właściwości, które odwołują się do elementów w nim.

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

Na przykład:

var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
console.log(salsMotto.childNodes[i]);
}

Te właściwości nie są dostępne dla kolekcji tekstowych. Możesz z nich korzystać tylko na kolekcjach Obiektowych. Aby sprawdzić, czy możesz przejść przez element, możesz sprawdzić jego właściwości nodeType/nodeValue Prawdopodobnie nie będziesz potrzebował lub chciał korzystać z przechodzenia przez DOM, ale to kolejna dodatkowa opcja dostępna dla ciebie.

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.