JavaScript метод document.getElementById()

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

JavaScript метод getElementById() объекта Document возвращает объект Element, представляющий из себя элемент, глобальный атрибут id которого соответствует указанной строке. Если подобный элемент не будет найден, то метод возвратит значение null. Этот метод один из самых часто используемых, по той причине, что обеспечивает простой способ получения определенного элемента внутри документа (объекта Element).

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

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

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

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

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

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

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

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

JavaScript синтаксис

const element = document.getElementById(id);

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

DOM Standard.

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

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

Поиск трёх блоков по id

Нажмите ▶, затем Нажми меня: блоки с id first, second и third станут красным, зелёным и синим. Измените id в index.html — getElementById() вернёт null и пример покажет ошибку в консоли.

index.html

HTML

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

main.js

JavaScript

function myFunc() {
    let first = document.getElementById('first'),
        second = document.getElementById('second'),
        third = document.getElementById('third')

    first.style.color = 'red'
    second.style.color = 'green'
    third.style.color = 'blue'
}

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

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