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

    JavaScript

    .getElementById()

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

    1. Кратко
    2. Пример
    3. Как это понять
    4. На практике
      1. nlopin

    Кратко

    Метод объекта 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 — элемент с искомым идентификатором или один, или его нет. Такой поиск работает очень быстро.

    На практике

    nlopin

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

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

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

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