.get Element By Id ( )
Метод объекта document , который позволяет найти элемент на веб-странице по его идентификатору (атрибут id ). Возвращает Element или null , если ничего не нашлось.
Пример
Скопировать ссылку «Пример» Скопировано
Привет, незнакомец!
let title = document.getElementById("title") console.log(title.textContent) // напечатает "Привет, незнакомец!"html> head>head> body> h1 id="title">Привет, незнакомец!h1> script> let title = document.getElementById("title") console.log(title.textContent) // напечатает "Привет, незнакомец!" script> body> html>
Как понять
Скопировать ссылку «Как понять» Скопировано
Метод работает с DOM, который связан с HTML-разметкой. Если в HTML есть тег с атрибутом id , то его можно получить из JavaScript с помощью метода get Element By Id ( ) .
Спецификация HTML требует, чтобы в рамках одной страницы значения атрибутов id были уникальными. За счёт этого и работает метод get Element By Id ( ) — элемент с искомым идентификатором или один, или его нет. Такой поиск работает очень быстро.
На практике
Скопировать ссылку «На практике» Скопировано
Николай Лопин советует
Скопировать ссылку «Николай Лопин советует» Скопировано
🛠 С идентификаторами удобно работать, когда их немного. Они хорошо подходят для уникальных элементов на странице: единственного заголовка, элементов формы или самой формы. Не используйте идентификаторы для повторяющихся элементов — элементов списков, повторяющихся полей.
🛠 Скрипты, работающие с HTML, видят только ту разметку, которую уже распарсил браузер. Браузер парсит HTML сверху вниз. Если скрипт находится вверху страницы, то он не найдёт элементы ниже в странице — браузер их ещё не увидел и ничего о них не знает. Поэтому скрипты либо подключают в конце страницы, либо подписываются на событие DOM Content Loaded , которое сигнализирует о том, что браузер распарсил весь HTML.
🛠 Спецификация HTML требует уникальности идентификатора на странице, но сайт не сломается, если идентификаторы задублируются. До такого лучше не доводить, потому что поведение get Element By Id ( ) в этом случае не определено — метод может вернуть любой из элементов.
🛠 В отличие от других похожих методов: get Elements By Class Name ( ) и get Elements By Tag Name ( ) , метод get Element By Id ( ) есть только у объекта document .