/ ↲
    Расширенный поиск

    JavaScript

    .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.

    Читайте также