Основно съдържание

Програмиране

Курс: Програмиране > Раздел 6

Урок 3: Методи за достъп на DOM

Преглед: Методи за достъп до DOM

Класна стая на Google

Какви методи можем да използваме?

Показахме ти как можеш да използваш следните методи, за да откриеш даден елемент или елементи в уеб страницата си:

Какво ще получим?

Има и два метода, които връщат един обект Element - getElementById и querySelector:

var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Математиката е яка";

Методите getElementsByClassName и getElementsByTagName връщат обект HTMLCollection, който има поведение на масив. Тази колекция е "жива", което означава, че колекцията се актуализира, ако към документа се добавят допълнителни елементи с име на тага или на класа.

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

Методът querySelectorAll() връща обект NodeList, който също се държи като масив. Този лист е "статичен", което означава, че няма да се актуализира, ако към страницата се добавят нови елементи, които отговарят на селектора. Малко вероятно е да попаднеш на разлика във връщаните типове, когато използваш тези методи, но е добре да имаш тези неща предвид.

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

Достъпване с подзаявки

Когато намериш елемент, можеш да изпълняваш подзаявки върху него с помощта на методите, които току що показахме. Например:

// намира елемент с даденото ID
var salsMotto = document.getElementById("salsMotto");
// намира елементите span в този елемент:
var mottoWords = salsMotto.getElementsByTagName("span");
// отпечатва колко такива елемента има
console.log(mottoWords.length);

Обхождане на DOM

Друг начин за достъпване на елементите е чрез "обхождане " на DOM дървото. Всеки елемент има свойства, които сочат към елемента, с който е свързан:

firstElementChild
lastElementChild
nextElementChild/nextElementSibling
previousElementChild/previousElementSibling
childNodes
childElementCount

Например:

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

Тези свойства не са налични върху Text възлите, а само върху Element възлите. За да се увериш, че можеш да обходиш един елемент, можеш да провериш неговите свойства nodeType/nodeValue. Вероятно няма да се наложи или няма да искаш да използваш обхождане на DOM, но все пак това е още една възможност на твое разположение.

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.