LearnJS

getElementsByTagName() в JavaScript

Поиск по имени тега

Метод document.getElementsByTagName() находит все элементы с указанным именем тега. Результат - коллекция HTMLCollection. Если совпадений нет, она будет пустой, а не равной null.

<ul class="tasks">
  <li>Проверить почту</li>
  <li>Подготовить отчёт</li>
</ul>
const items = document.getElementsByTagName('li');

console.log(items.length); // 2

В аргумент передают имя тега: ‘li’, а не ‘<li>’. В HTML обычно пишут имя тега в нижнем регистре.

Поиск внутри контейнера

Метод можно вызвать не только у document, но и у конкретного элемента. Тогда поиск пройдёт только среди его вложенных элементов.

const tasks = document.querySelector('.tasks');
const taskItems = tasks.getElementsByTagName('li');

В taskItems попадут пункты списка внутри tasks, а элементы li из других частей страницы не будут найдены.

HTMLCollection

HTMLCollection не является массивом, поэтому у неё нет метода forEach(). Для обхода используйте обычный цикл for.

for (let index = 0; index < taskItems.length; index++) {
  taskItems[index].classList.add('task--selected');
}

Коллекция живая: при добавлении или удалении li внутри списка она обновится автоматически.

Не меняйте состав такой коллекции прямо во время обхода - часть элементов можно пропустить. Если нужен фиксированный набор, используйте querySelectorAll().

getElementsByTagName() или querySelectorAll()

document.getElementsByTagName('li'); // живая HTMLCollection
document.querySelectorAll('li'); // статический NodeList

getElementsByTagName() принимает имя тега. querySelectorAll() принимает любой CSS-селектор и удобен, когда нужен фиксированный набор элементов.

Итого

document.getElementsByTagName() находит все элементы по имени тега и возвращает живую HTMLCollection. Метод можно вызвать у контейнера, чтобы ограничить область поиска. Для более гибкого поиска и статического результата используйте querySelectorAll().