JavaScript - DOM Collections

Здравствуйте, стремящиеся к программированию! Сегодня мы окунемся в fascинирующий мир DOM Collections в JavaScript. Не волнуйтесь, если вы новички в программировании - я буду вести вас через это путешествие шаг за шагом, так же, как я делал это для countless студентов на протяжении моих лет преподавания. Так что возьмите кружку кофе (или ваш любимый напиток) и начнем!

The HTMLCollection Object

Представьте, что вы находитесь в библиотеке и хотите найти все книги о JavaScript. Библиотекарь дает вам специальную тележку, содержащую все эти книги. В мире веб-разработки эта тележка похожа на HTMLCollection - коллекцию HTML-элементов, с которыми мы можем работать с помощью JavaScript.

Что такое HTMLCollection?

HTMLCollection - это объект, resembleющий список, который представляет коллекцию HTML-элементов на веб-странице. Он "живой", что означает, что он автоматически обновляется, когда изменяется базовый документ.

Давайте посмотрим на простой пример:

<div class="book">JavaScript Basics</div>
<div class="book">Advanced JavaScript</div>
<div class="book">DOM Manipulation</div>

<script>
let books = document.getElementsByClassName('book');
console.log(books);
console.log(books.length); // Вывод: 3
</script>

В этом примере books - это HTMLCollection, содержащий все элементы с классом "book". Свойство length говорит нам, сколько элементов находится в коллекции.

Доступ к элементам в HTMLCollection

Вы можете получить доступ к элементам в HTMLCollection так же, как и в массиве:

console.log(books[0].innerText); // Вывод: "JavaScript Basics"
console.log(books[1].innerText); // Вывод: "Advanced JavaScript"
console.log(books[2].innerText); // Вывод: "DOM Manipulation"

Однако помните, что HTMLCollection не совсем массив. Он resembleет массив, но не имеет всех методов, которые есть у массивов.

Циклический доступ через HTMLCollection

Чтобы итерировать через все элементы в HTMLCollection, вы можете использовать цикл for:

for (let i = 0; i < books.length; i++) {
console.log(books[i].innerText);
}

Или, если вы предпочитаете более современный подход, вы можете преобразовать HTMLCollection в массив и использовать методы массивов:

Array.from(books).forEach(book => {
console.log(book.innerText);
});

Collections of document Object and DOM Elements

Теперь, когда мы понимаем HTMLCollection, давайте рассмотрим некоторые распространенные способы создания коллекций DOM-элементов.

document.getElementsByTagName()

Этот метод возвращает HTMLCollection элементов с указанным именем тега.

<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>

<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Вывод: 3

for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
</script>

document.getElementsByClassName()

Мы уже видели это раньше, но давайте углубимся немного:

<div class="fruit">Apple</div>
<div class="fruit">Banana</div>
<div class="fruit">Orange</div>

<script>
let fruits = document.getElementsByClassName('fruit');
console.log(fruits.length); // Вывод: 3

Array.from(fruits).forEach(fruit => {
console.log(fruit.innerText);
});
</script>

document.querySelectorAll()

Этот мощный метод возвращает NodeList (который resembles HTMLCollection) всех элементов, соответствующих CSS-селектору:

<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>

<script>
let items = document.querySelectorAll('ul .item');
console.log(items.length); // Вывод: 3

items.forEach(item => {
console.log(item.innerText);
});
</script>

Заметим, что в отличие от HTMLCollection, NodeList, возвращаемый querySelectorAll(), не "живой" и имеет встроенный метод forEach.

Сравнение методов коллекций

Вот удобная таблица, резюмирующая методы коллекций, которые мы обсуждали:

Метод	Возвращает	Живой?	Сценарий использования
getElementsByTagName()	HTMLCollection	Да	Когда вам нужны элементы определенного тега
getElementsByClassName()	HTMLCollection	Да	Когда вам нужны элементы с определенным классом
querySelectorAll()	NodeList	Нет	Когда вам нужны элементы, соответствующие CSS-селектору

Помните, "живой" означает, что коллекция автоматически обновляется при изменениях в DOM.

Заключение

И вот оно, дорогие студенты! Мы совершили путешествие по стране DOM Collections, от HTMLCollection до различных методов сбора DOM-элементов. Эти инструменты являются основополагающими для манипулирования веб-страницами с помощью JavaScript, позволяя вам выбирать и изменять элементы с легкостью.

По мере практики с этими концепциями вы найдете себя более комфортным в манипулировании DOM. Это как учиться играть на инструменте - сначала это может показаться сложным, но с практикой вы будете создавать красивые веб-симфонии в кратчайшие сроки!

Помните, ключ к maîtriser programming - это практика и好奇心. Не бойтесь экспериментировать с этими методами, пробовать разные сценарии и, самое главное, получайте удовольствие от программирования!

До下一次 встречи, счастливого кодирования!

Credits: Image by storyset