Метод HTML DOM Document getElementById()

Определение и использование

getElementById() Метод возвращает элемент с указанным id.

Если элемент не существует,getElementById() Метод возвращает null.

getElementById() Метод является одним из самых часто используемых методов в HTML DOM. Почти каждый раз, когда вы хотите прочитать или изменить элемент HTML, вы используете его.

Подсказка

Любой id должен быть уникальным, но:

Если существует два или более элементов с одинаковым id, то getElementById() Возвращает первый.

См. также:

Метод getElementsByTagName()

Метод getElementsByClassName()

Метод querySelector()

Метод querySelectorAll()

Пример

Пример 1

Получите элемент с указанным id:

document.getElementById("demo");

Попробуйте сами

Пример 2

Получите элемент и измените его цвет:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

Попробуйте сами

Пример 3

или изменить только его цвет:

document.getElementById("demo").style.color = "red";

Попробуйте сами

Синтаксис

document.getElementById(elementId)

Параметр

Параметр Описание
elementId Обязателен. Значение id элемента.

Возвратное значение

Тип Описание
Объект

элемент с указанным id.

Если не найдено,则在озвращает null.

Технические детали

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

Этот метод будет检索 id属性值为 elementId элементом, он вернет его. Если такой элемент не найден, он вернет null. Значение属性 id в документе уникально, если этот метод находит несколько элементов с указанным elementId Элемента, который будет случайным образом возвращен, или вернет null.

Обратите внимание:Название этого метода начинается с Id с концом, а не IDне путайте с!

В HTML-документе этот метод всегда возвращает атрибут с указанным id. Используйте HTMLDocument.getElementByName() Метод, который ищет элементы HTML по значению их атрибута name.

В XML-документах этот метод используется для поиска любого свойства с типом id, независимо от его имени. Если тип свойства XML является неизвестным (например, XML-парсер пропустил или не может определить DTD документа), этот метод всегда возвращает null. В客户端 JavaScript этот метод редко используется вместе с XML-документами. Фактически,getElementById() Метод最初 был определен как член интерфейса HTMLDocument, но в более поздних версиях 2-го уровня DOM он был добавлен в интерфейс Document.

Поддержка браузеров

document.getElementById() Это функция DOM Level 2 (2001).

Поддерживается всеми браузерами:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Учебник CSS:Грамматика CSS

Руководство по CSS:Выборщик #id CSS

Руководство по HTML DOM:Атрибут id HTML DOM

Руководство по HTML DOM:Объект Style HTML DOM