0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Чтобы что-то сделать с элементами DOM средствами JavaScript, нужно выбрать нужные элементы по селектору, например, по классу. Эту задачу можно решить двумя способами:</p>
1
<p>Чтобы что-то сделать с элементами DOM средствами JavaScript, нужно выбрать нужные элементы по селектору, например, по классу. Эту задачу можно решить двумя способами:</p>
2
<ol><li>С помощью document.getElementsByClassName().</li>
2
<ol><li>С помощью document.getElementsByClassName().</li>
3
<li>С помощью document.querySelectorAll().</li>
3
<li>С помощью document.querySelectorAll().</li>
4
</ol><p>Чтобы эффективно использовать эти методы в зависимости от текущих задач, нужно понимать, как они работают, а самое главное - что они возвращают.</p>
4
</ol><p>Чтобы эффективно использовать эти методы в зависимости от текущих задач, нужно понимать, как они работают, а самое главное - что они возвращают.</p>
5
<h2>Содержание</h2>
5
<h2>Содержание</h2>
6
<ul><li><a>Краткая теория</a></li>
6
<ul><li><a>Краткая теория</a></li>
7
<li><a>Практические примеры</a></li>
7
<li><a>Практические примеры</a></li>
8
<li><a>Заключение</a></li>
8
<li><a>Заключение</a></li>
9
</ul><h2>Краткая теория</h2>
9
</ul><h2>Краткая теория</h2>
10
<p>Обратимся к справочнику MDN:</p>
10
<p>Обратимся к справочнику MDN:</p>
11
<ul><li>document.getElementsByClassName() возвращает динамическую HTML-коллекцию (HTMLCollection), которая представляет собой массивоподобный итерируемый объект дочерних элементов, соответствующих указанным именам классов.</li>
11
<ul><li>document.getElementsByClassName() возвращает динамическую HTML-коллекцию (HTMLCollection), которая представляет собой массивоподобный итерируемый объект дочерних элементов, соответствующих указанным именам классов.</li>
12
<li>document.querySelectorAll() возвращает статический список нод (NodeList), в который входят все найденные в документе элементы, соответствующие указанным селекторам.</li>
12
<li>document.querySelectorAll() возвращает статический список нод (NodeList), в который входят все найденные в документе элементы, соответствующие указанным селекторам.</li>
13
</ul><p>Теперь важно понять, что такое динамическая HTMLCollection и статический NodeList, а также чем они отличаются. Давайте разбираться.</p>
13
</ul><p>Теперь важно понять, что такое динамическая HTMLCollection и статический NodeList, а также чем они отличаются. Давайте разбираться.</p>
14
<h2>Практические примеры</h2>
14
<h2>Практические примеры</h2>
15
<p>Рассмотрим такой пример:</p>
15
<p>Рассмотрим такой пример:</p>
16
<p>Выберем элементы списка по классу item двумя способами, рассмотренными выше.</p>
16
<p>Выберем элементы списка по классу item двумя способами, рассмотренными выше.</p>
17
<p>Как видно на иллюстрации, оба подхода возвращают все элементы с классом item. Но они возвращают разные структуры данных.</p>
17
<p>Как видно на иллюстрации, оба подхода возвращают все элементы с классом item. Но они возвращают разные структуры данных.</p>
18
<p>Добавим несколько элементов <li> в список, а также добавим код в файл script.js.</p>
18
<p>Добавим несколько элементов <li> в список, а также добавим код в файл script.js.</p>
19
<p>Посмотрим на вывод в консоли.</p>
19
<p>Посмотрим на вывод в консоли.</p>
20
<p>Видно, что после добавления четвёртого элемента в список количество элементов в HTMLCollection увеличилось, а в NodeList не изменилось.</p>
20
<p>Видно, что после добавления четвёртого элемента в список количество элементов в HTMLCollection увеличилось, а в NodeList не изменилось.</p>
21
<p>Причина в том, что HTMLCollection представляет собой динамическую структуру данных, а NodeList - статическую структуру данных. То есть HTMLCollection обновляется каждый раз, когда меняется количество элементов, полученных с помощью соответствующего метода. А NodeList не меняется после формирования, даже если меняется HTML-код страницы.</p>
21
<p>Причина в том, что HTMLCollection представляет собой динамическую структуру данных, а NodeList - статическую структуру данных. То есть HTMLCollection обновляется каждый раз, когда меняется количество элементов, полученных с помощью соответствующего метода. А NodeList не меняется после формирования, даже если меняется HTML-код страницы.</p>
22
<h2>Заключение</h2>
22
<h2>Заключение</h2>
23
<p>Смело используйте в работе HTMLCollection и NodeList, но учитывайте разницу между ними. Это поможет выбирать структуру данных, которая соответствует текущим задачам.</p>
23
<p>Смело используйте в работе HTMLCollection и NodeList, но учитывайте разницу между ними. Это поможет выбирать структуру данных, которая соответствует текущим задачам.</p>
24
<p>Адаптированный перевод статьи<a>Difference between HTMLCollection and NodeList</a>by Jose Arteaga.</p>
24
<p>Адаптированный перевод статьи<a>Difference between HTMLCollection and NodeList</a>by Jose Arteaga.</p>