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 的 Element 节点,并将它返回。如果没有找到这样的元素 Element,它将返回 null。id 属性的值在文档中是唯一的,如果该方法找到多个拥有指定 elementId 的 Element 节点,它将随机返回一个这样的 Element 节点,或者返回 null

注意:该方法的名称以 Id 结尾,不是 ID,不要拼错!

在 HTML 文档中,该方法总是检索拥有指定 id 的属性。请使用 HTMLDocument.getElementByName() 方法,根据它们的 name 属性中的值来查找 HTML 元素。

在 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 参考手册:CSS #id 选择器

HTML DOM 参考手册:HTML DOM id 属性

HTML DOM 参考手册:HTML DOM Style 对象