Метод getElementsByTagName() элемента HTML DOM Element

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

getElementsByTagName() Метод возвращает набор подэлементов с указанным именем тега, в виде объекта NodeList.

Совет:Значение параметра "*" Вернуть все подэлементы элемента.

Дополнительная информация:

Метод getElementsByClassName()

Метод querySelector()

Метод querySelectorAll()

NodeList

NodeList Это набор узлов, аналогичный массиву (списку).

Вы можете получить доступ к узлам в списке по индексу (индексу). Индекс начинается с 0.

Свойство lengthВернуть количество узлов в списке.

Пример

Пример 1

Изменить HTML-содержимое первого элемента <li> в списке:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

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

Пример 2

Количество элементов <p> в "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

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

Пример 3

Изменить размер шрифта второго элемента <p> в "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

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

Пример 4

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

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

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

Пример 5

Изменить цвет фона четвертого элемента (индекс 3) в "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

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

Пример 6

Используйте параметр "*", чтобы изменить цвет фона всех элементов в "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

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

Синтаксис

element.getElementsByTagName(tagname)

Параметр

Параметр Описание
tagname Обязателен. Тег подэлемента.

Возвратное значение

Тип Описание
NodeList

Дочерние элементы элементов с заданным именем тега.

Элементы сортируются по их порядку появления в исходном коде.

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

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

Внимание

Интерфейс Documentтакже определяет Метод getElementsByTagName(), он ähnlich, но он遍历整个文档，а не только дети узла.

Не путайте этот метод с Метод HTMLDocument.getElementsByName() Смущение, второе основано на значении атрибута name элемента, а не на их тегах.

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

Все браузеры поддерживают element.getElementsByTagName():

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