JavaScript - Списки узлов DOM

Введение в списки узлов DOM

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

Что такое список узлов DOM?

Прежде чем мы углубимся, давайте начнем с азов. Представьте себе веб-страницу как генеалогическое древо. DOM (Document Object Model) - это как генеалогическое древо для веб-страниц. Каждый элемент на странице - будь то абзац, кнопка или изображение - является членом этой семьи, или, если говорить техническим языком, "узлом".

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

Пример 1: Получение списка узлов

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

<div>
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

В этом примере querySelectorAll('p') возвращает список узлов, содержащий все <p> элементы. Если вы запустите это в консоли вашего браузера, вы увидите что-то вроде:

NodeList(3) [p, p, p]

Это告诉我们, что у нас есть список узлов, содержащий три элемента абзаца.

Работа со списками узлов

Теперь, когда у нас есть список узлов, давайте посмотрим, что мы можем с ним сделать!

Пример 2: Прохождение по списку узлов

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`Абзац ${index + 1}: ${paragraph.textContent}`);
});

Этот код выведет:

Абзац 1: Абзац 1
Абзац 2: Абзац 2
Абзац 3: Абзац 3

Здесь мы используем метод forEach для прохождения по каждому абзацу в нашем списке узлов. Это как если бы мы прошли по списку гостей на вечеринке и поприветствовали каждого гостя лично!

Магия живых и статичных списков узлов

Теперь, где事情 становятся интересными. Списки узлов могут быть либо "живыми", либо "статичными".

Живой список узлов - это как магический список гостей, который обновляется сам, когда люди приходят или уходят с вечеринки. В contrast, статичный список узлов - это как snapshot списка гостей на определенный момент - он не изменяется, даже если arrive новые гости.

Пример 3: Живой список узлов

<ul id="guestList">
<li>Алиса</li>
<li>Боб</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // Выводит: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Чарли';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // Выводит: 3
</script>

В этом примере getElementsByTagName возвращает живой список узлов. Когда мы добавляем Чарли в список, наш список узлов guests автоматически обновляется!

Пример 4: Статичный список узлов

<ul id="guestList">
<li>Алиса</li>
<li>Боб</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // Выводит: 2

let newGuest = document.createElement('li');
newGuest.textContent = 'Чарли';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); //прежнему выводит: 2
</script>

Здесь querySelectorAll возвращает статичный список узлов. Даже после добавления Чарли, наш список узлов guests не изменяется. Это как если бы мы сделали фотографию списка гостей, и эта фотография не обновляется, когда arrive новые гости.

Разница между HTMLCollection и NodeList

Теперь давайте поговорим о двух cousins в семье DOM: HTMLCollection и NodeList. Они похожи, но у них есть свои уникальные особенности.

HTMLCollection

HTMLCollection всегда живой. Это как список гостей, который constantly обновляется.

let divs = document.getElementsByTagName('div'); // Возвращает HTMLCollection

NodeList

NodeList может быть либо живым, либо статичным, в зависимости от того, как он создается.

let paragraphs = document.querySelectorAll('p'); // Возвращает статичный NodeList
let childNodes = document.body.childNodes; // Возвращает живой NodeList

Вот таблица, резюмирующая их различия:

Feature	HTMLCollection	NodeList
Live/Static	Always live	Can be live or static
Content	Only element nodes	Can include all node types
Accessing items	By name, id, or index	Only by index
forEach method	Not available	Available

Заключение

И вот мы arrived к концу, друзья! Мы прошли через страну списков узлов DOM, от базовых концепций до нюансов живых и статичных списков. Помните, практика makes perfect. Попробуйте эти примеры, экспериментируйте с ними, и вскоре вы будете манипулировать веб-страницами как опытный разработчик!

Before we part ways, here's a little web developer joke for you: Why did the JavaScript developer wear glasses? Because he couldn't C#! (Get it? C Sharp? Okay, I'll see myself out...)

Keep coding, keep learning, and most importantly, keep having fun with JavaScript!

Credits: Image by storyset