.getElementById()

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

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

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"
        
          
          <html>  <head></head>  <body>    <h1 id="title">Привет, незнакомец!</h1>    <script>      let title = document.getElementById("title")      console.log(title.textContent)      // напечатает "Привет, незнакомец!"    </script>  </body></html>
          <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 с помощью метода getElementById().

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

На практике

Секция статьи "На практике"

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

Секция статьи "Николай Лопин советует"

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

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

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

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