Метод getElementsByTagName() объекта HTML DOM Document

Определение и использование

getElementsByTagName() Метод возвращает набор всех элементов с заданным именем тега.

getElementsByTagName() Метод возвращает HTMLCollection.

getElementsByTagName() Атрибут является только чтением.

Комментарий:getElementsByTagName("*") Возвращает все элементы в документе.

HTMLCollection

HTMLCollection Это коллекция аналогичная массиву HTML элементов (список).

Элементы в наборе можно получить по индексу (начиная с 0).

length Атрибут возвращает количество элементов в наборе.

См. также:

Метод getElementById()

Метод getElementsByClassName()

Метод querySelector()

Метод querySelectorAll()

Объект HTMLCollection

Пример

Пример 1

Получить все элементы с тегом "li":

const collection = document.getElementsByTagName("li");

Попробуйте сами

Пример 2

Получить все элементы в документе:

const collection = document.getElementsByTagName("*");

Попробуйте сами

Пример 3

Изменить внутренний HTML первого элемента <p> в документе:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Попробуйте сами

Пример 4

Количество элементов <li> в документе:

let numb = document.getElementsByTagName("li").length;

Попробуйте сами

Пример 5

Изменить цвет фона всех элементов <p>:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Попробуйте сами

Синтаксис

document.getElementsByTagName(tagName)

Параметры

Параметры Описание
tagName Обязателен. Маркер элемента.

Возврат

Тип Описание
Объект

Объект HTMLCollection.

Коллекция элементов с указанным именем тега.

Сортировка по порядку появления элементов в документе.

Технические детали

Этот метод возвращает объект NodeList (можно обрабатывать как только чтение массив), который хранит все элементы Element с указанным именем тега в документе, их порядок соответствует порядку их появления в исходном документе.

Объект NodeList является «живым», то есть если в документе добавлены или удалены элементы с указанным именем тега, его содержимое автоматически обновляется.

HTML-документы не различают регистр, поэтому можно использовать любую форму регистра для указания tagNameон совпадает с любыми тегами с тем же именем в документе, независимо от регистра, который они используют в исходном документе. Но XML-документы различают регистр:tagName Совпадает только с тегами, имеющими полностью совпадающее имя и регистр в исходном документе.

Совет:Интерфейс Element определяет метод с тем же именем, который ищет только поддерево документа. Кроме того, интерфейс HTMLDocument определяет Метод getElementByName()она ищет элементы по значению атрибута name (а не по имени тега).

Поддержка браузеров

document.getElementsByTagName() Это функция DOM Level 1 (1998).

Поддерживается всеми браузерами:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Руководство JavaScript:element.getElementsByTagName()

Уроки JavaScript:Список узлов HTML DOM в JavaScript