Клавиша / esc

.getElementById()

Получаем DOM-элементы по атрибуту id.

Время чтения: меньше 5 мин

Кратко

Скопировано

Метод объекта document, который позволяет найти элемент на веб-странице по его идентификатору (атрибут id). Возвращает Element или null, если ничего не нашлось.

Пример

Скопировано
        
          
          <html>  <body>    <h1 id="title">Привет, незнакомец!</h1>    <script>      let title = document.getElementById('title')      console.log(title.textContent)      // Напечатает «Привет, незнакомец!»    </script>  </body></html>
          <html>
  <body>
    <h1 id="title">Привет, незнакомец!</h1>
    <script>
      let title = document.getElementById('title')
      console.log(title.textContent)
      // Напечатает «Привет, незнакомец!»
    </script>
  </body>
</html>

        
        
          
        
      

Живой пример:

Открыть демо в новой вкладке

Как понять

Скопировано

Метод работает с DOM, который связан с HTML-разметкой. Если в HTML есть тег с атрибутом id, то его можно получить из JavaScript с помощью метода getElementById().

Спецификация HTML требует, чтобы в рамках одной страницы значения атрибутов id были уникальными. За счёт этого и работает метод getElementById() — элемент с искомым идентификатором или один, или его нет. Такой поиск работает очень быстро.

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 С идентификаторами удобно работать, когда их немного. Они хорошо подходят для уникальных элементов на странице: единственного заголовка, элементов формы или самой формы. Не используйте идентификаторы для повторяющихся элементов — элементов списков, повторяющихся полей.

🛠 Скрипты, работающие с HTML, видят только ту разметку, которую уже распарсил браузер. Браузер парсит HTML сверху вниз. Если скрипт находится вверху страницы, то он не найдёт элементы ниже в странице — браузер их ещё не увидел и ничего о них не знает. Поэтому скрипты либо подключают в конце страницы, либо подписываются на событие DOMContent​Loaded, которое сигнализирует о том, что браузер распарсил весь HTML.

🛠 Спецификация HTML требует уникальности идентификатора на странице, но сайт не сломается, если идентификаторы задублируются. До такого лучше не доводить, потому что поведение getElementById() в этом случае не определено — метод может вернуть любой из элементов.

🛠 В отличие от других похожих методов, getElementsByClassName() и getElementsByTagName(), getElementById() есть только у объекта document.