Все статьи | Разработка

В чём разница между HTMLCollection и NodeList

В чём разница между HTMLCollection и NodeList главное изображение

Чтобы что-то сделать с элементами DOM средствами JavaScript, нужно выбрать нужные элементы по селектору, например, по классу. Эту задачу можно решить двумя способами:

  1. С помощью document.getElementsByClassName().
  2. С помощью document.querySelectorAll().

Чтобы эффективно использовать эти методы в зависимости от текущих задач, нужно понимать, как они работают, а самое главное — что они возвращают.

Краткая теория

Обратимся к справочнику MDN:

  • document.getElementsByClassName() возвращает динамическую HTML-коллекцию (HTMLCollection), которая представляет собой массивоподобный итерируемый объект дочерних элементов, соответствующих указанным именам классов.
  • document.querySelectorAll() возвращает статический список нод (NodeList), в который входят все найденные в документе элементы, соответствующие указанным селекторам.

Теперь важно понять, что такое динамическая HTMLCollection и статический NodeList, а также чем они отличаются. Давайте разбираться.

Практические примеры

Рассмотрим такой пример:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body>
    <ul id="list">
      <li class="item">First Item</li>
      <li class="item">Second Item</li>
      <li class="item">Third Item</li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

Выберем элементы списка по классу item двумя способами, рассмотренными выше.

Выбираем элементы

Как видно на иллюстрации, оба подхода возвращают все элементы с классом item. Но они возвращают разные структуры данных.

Добавим несколько элементов <li> в список, а также добавим код в файл script.js.

// получаем элемент ul
const list = document.getElementById('list');

// получаем элементы списка по классу двумя способами
const itemsByClassName = document.getElementsByClassName('item');
const itemsByQuerySelector = document.querySelectorAll('.item');

console.log('First console log', itemsByClassName, itemsByQuerySelector);

// добавляем четвёртый элемент в список
list.innerHTML += `<li class="item">Fourth Item</li>`;

console.log('Second console log', itemsByClassName, itemsByQuerySelector);

Посмотрим на вывод в консоли.

добавляем новые элементы в DOM и смотрим на результат

Видно, что после добавления четвёртого элемента в список количество элементов в HTMLCollection увеличилось, а в NodeList не изменилось.

Причина в том, что HTMLCollection представляет собой динамическую структуру данных, а NodeList — статическую структуру данных. То есть HTMLCollection обновляется каждый раз, когда меняется количество элементов, полученных с помощью соответствующего метода. А NodeList не меняется после формирования, даже если меняется HTML-код страницы.

Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.

Заключение

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

Адаптированный перевод статьи Difference between HTMLCollection and NodeList by Jose Arteaga.

Аватар пользователя Дмитрий Дементий
Дмитрий Дементий 05 октября 2020