Документ: метод getElementById()

Базовая версия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод getElementById() интерфейса Document возвращает объект Element, представляющий элемент, у которого свойство id соответствует указанной строке. Поскольку идентификаторы элементов должны быть уникальными, если они указаны, это удобный способ быстро получить доступ к конкретному элементу.

Если вам нужно получить доступ к элементу, у которого нет идентификатора, вы можете использовать querySelector(), чтобы найти элемент с помощью любого селектора.

Примечание: Идентификаторы должны быть уникальными внутри документа. Если два или более элементов в документе имеют один и тот же идентификатор, этот метод возвращает первый найденный элемент.

Синтаксис

getElementById(id)

Примечание: Регистр символов в имени этого метода "Id" должен быть правильным для работы кода; getElementByID() недействителен и не сработает, как бы естественно это ни выглядело.

Параметры

id: Идентификатор элемента для поиска. Идентификатор — это чувствительная к регистру строка, уникальная внутри документа; только один элемент должен иметь любой заданный идентификатор.

Возвращаемое значение

Объект Element, описывающий объект элемента DOM, соответствующий указанному идентификатору, или null, если такой элемент не был найден в документе.

Примеры

HTML

<html lang="en">
  <head>
    <title>getElementById example</title>
  </head>
  <body>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>

JavaScript

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}

Результат

Примечания по использованию

В отличие от некоторых других методов поиска элементов, таких как Document.querySelector() и Document.querySelectorAll(), getElementById() доступен только как метод глобального объекта document и не доступен как метод для всех элементов объекта DOM. Поскольку значения идентификаторов должны быть уникальными во всем документе, нет необходимости в «локальных» версиях функции.

Пример

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="parent-id">
      <p>hello word1</p>
      <p id="test1">hello word2</p>
      <p>hello word3</p>
      <p>hello word4</p>
    </div>
    <script>
      const parentDOM = document.getElementById("parent-id");
      const test1 = parentDOM.getElementById("test1");
      // throw error
      // Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
  </body>
</html>

Если элемента с заданным id, нет, эта функция возвращает null. Обратите внимание, что параметр id чувствителен к регистру, поэтому document.getElementById("Main") вернёт null вместо элемента <div id="main">, потому что «M» и «m» различны для целей этого метода.

Элементы, не находящиеся в документе, не просматриваются методом getElementById(). При создании элемента и присвоении ему идентификатора вы должны вставить элемент в дерево документа с помощью Node.insertBefore() или аналогичного метода, прежде чем вы сможете получить к нему доступ с помощью getElementById().

const element = document.createElement("div");
element.id = "test";
const el = document.getElementById("test"); // el will be null!

В документах, не являющихся HTML, реализация DOM должна содержать информацию о том, какие атрибуты являются типа ID. Атрибуты с именем «id» не являются атрибутами типа ID, если это не определено в DTD документа. Атрибут id определён как типа ID в обычных случаях XHTML, XUL и других. Ожидается, что реализации, которые не знают, являются ли атрибуты типа ID или нет, вернут null.

Спецификации

Спецификация
DOM # ref-for-dom-nonelementparentnode-getelementbyid②

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getElementById`	1	12	1	7	1	18	4	10.1	1	1.0	4.4

См. также

Document справка по другим методам и свойствам, которые вы можете использовать для получения ссылок на элементы в документе.
Document.querySelector() для селекторов через запросы, например 'div.myclass'
Document.evaluate() — содержит служебный метод для выбора по xml:id в XML документах

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById