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 对象