JavaScript метод document.getElementsByTagName()

Определение и применение

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

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

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Document.getElementsByTagName

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
getElementsByTagName	✓1	✓12	✓1	✓5.1	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const elements = document.getElementsByTagName(tagName);

Спецификация

DOM Standard.

Значения параметров

Пример использования

<button data-migration-click-0="">Нажми меня</button>
<div>Первый блок</div>
<div>Второй блок</div>
<div>Третий блок</div>

function myFunc() {
    let blocks = document.getElementsByTagName('div')

    for (let i = 0; i < blocks.length; i++) {
        blocks[i].style.border = '1px solid green'
    }

    blocks[0].innerHTML += ' !'
    blocks[1].innerHTML += ' !!'
    blocks[2].innerHTML += ' !!!'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода document.getElementsByTagName() выбирает все элементы с определенным тегом и инициализируем переменную этим значением (массивоподобный объект HTMLCollection). После этого мы проходим циклом по всем элементам этого массивоподобного объекта и устанавливаем сплошную границу размером 1 пиксель зеленого цвета.

Кроме того добавляем текстовое содержимое каждому элементу в зависимости от его индекса в коллекции.