JavaScript метод Element.getElementsByTagName()
Определение и применение
JavaScript метод getElementsByClassName() объекта Element возвращает живую коллекцию HTMLCollection элементов с заданным именем тега, поиск элементов при этом ведется внутри указанного элемента.
Объект NodeList представляет коллекцию узлов, которые могут быть доступны по индексным номерам (индекс начинается с 0). Вы можете использовать свойство length объекта NodeList для определения количества элементов с указанным именем класса. Если искомые элементы отсутствуют, то значение length будет соответствовать значению 0.
Поддержка браузерами
Спецификация: dom.spec.whatwg
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
getElementsByTagName | 1 1 Примечание MDN (англ.) Initially, this method was returning a | 12 | 1 1 Примечание MDN (англ.) Before Firefox 19, this method was returning a | 8 8 Примечание MDN (англ.) Initially, this method was returning a | 1 1 Примечание MDN (англ.) Initially, this method was returning a | 18 18 Примечание MDN (англ.) Initially, this method was returning a | 4 4 Примечание MDN (англ.) Before Firefox for Android 19, this method was returning a | 10.1 | 1 1 Примечание MDN (англ.) Initially, this method was returning a | 1.0 1.0 Примечание MDN (англ.) Initially, this method was returning a | 4.4 4.4 Примечание MDN (англ.) Initially, this method was returning a | 1 1 Примечание MDN (англ.) Initially, this method was returning a |
| getElementsByTagName("*") | 1 | 12 | 1 | ≤15 | 1 | 18 | 4 | ≤14 | 1 | 1.0 | 4.4 | 1 |
поддерживается с ограничениями нет поддержки нет данных≤31 — не позднее версии 31
JavaScript синтаксис:
// поиск элементов с определенным тегом
let elements = element.getElementsByTagName( tagName )
tagName - String
Версия JavaScript
Document Object Model (DOM) Level 1 CoreЗначения параметров
| Параметр | Описание |
|---|---|
| tagName | Строковое значение, представляющее имя тега элемента, который вы хотите найти внутри элемента. При вызове перед осуществлением поиска преобразует значение аргумента в нижний регистр. Специальная строка "*" представляет все элементы. Обязательный параметр. |
Пример использования
<html>
<head>
<title>Использование JavaScript метода .getElementByTagName() объекта Element</title>
</head>
<body>
<button onclick="myFunc()">Нажми меня</button>
<!-- добавляем атрибут событий onclick -->
<section>
<div>Первый блок</div>
<div>Второй блок</div>
<div>Третий блок</div>
</section>
<script>
function myFunc() {
const section = document.body.getElementsByTagName("section")[0]; // находим элемент с определенным именем тега внутри элемента <body>
let blocks = section.getElementsByTagName("div"); // находим элементы с определенным именем тега внутри элемента <section>
for (let i = 0; i < blocks.length; i++) {
// проходим циклом по всем элементам массивоподобного объекта
blocks[i].style.color = "orangered"; // устанавливаем определенный цвет текста каждому элементу
}
}
</script>
</body>
</html>
В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода .getElementsByTagName() выбирает все элементы с определенным именем тега и инициализируем переменную этим значением (массивоподобный объект). Обратите внимание, что мы сразу указали индекс 0, который ссылается на наш элемент <section>.
Кроме того, с использованием метода .getElementsByTagName() мы выбираем все элементы <div> и инициализируем переменную этими элементами, поиск при этом мы ведем непосредственно внутри элемента <section>. После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект NodeList) и устанавливаем определенный цвет текста каждому элементу.
Пример использования JavaScript метода .getElementByClassName() объекта Element: попробуйте сами
index.html
<button data-migration-click-0="">Нажми меня</button>
<section>
<div>Первый блок</div>
<div>Второй блок</div>
<div>Третий блок</div>
</section>
main.js
function myFunc() {
const section = document.body.getElementsByTagName("section")[0];
let blocks = section.getElementsByTagName("div");
for (let i = 0; i < blocks.length; i++) {
blocks[i].style.color = "orangered";
}
}
// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector("[data-migration-click-0]").addEventListener("click", function () {
myFunc();
});
document.querySelector("[data-migration-click-0]").removeAttribute("data-migration-click-0");
Результат нашего примера:
