Возвращает ссылку на элемент по его идентификатору (ID); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута id в HTML или из скрипта.
element = document.getElementById(id);
id ссылка на объект типа {{domxref("Element")}} соответствующий указанному ID или null, если элемент с указанным ID не найден в документе.
<!DOCTYPE html>
<html>
<head>
<title>getElementById example</title>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
Начинающим следует знать, что верхний регистр в части имени метода 'Id' должен быть точным для корректного вызова функции; "getElementByID" будет не корректно, как бы естественно это ни казалось.
Если элементы с указанным id отсутствуют, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так document.getElementById("Main") вернёт null вместо элемента <div id="main">, потому что "M" и "m" различны для этого метода.
Элементы вне документа не ищутся getElementById(). При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью {{domxref("Node.insertBefore()")}} или подобным методом, до того как вы сможете получить к нему доступ при помощи getElementById():
var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!
Не-HTML документы. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.
| Спецификация | Статус | Комментарий |
|---|---|---|
| {{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}} | {{Spec2('DOM1')}} | Исходное определение интерфейса |
| {{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM2 Core')}} | Заменяет DOM 1 |
| {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM3 Core')}} | Заменяет DOM 2 |
| {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} | {{Spec2('DOM WHATWG')}} | Должен заменить DOM 3 |
{{Compat}}
'div.myclass'