Document: getElementById() 方法

getElementById() 方法是 Document 接口的方法，它返回一个 Element 对象，表示与指定字符串匹配的 id 属性的元素。由于元素 ID 在指定时必须是唯一的，因此它们是快速访问特定元素的有效方法。

如果您需要访问没有 ID 的元素，可以使用 querySelector() 使用任何 选择器 来查找元素。

注意: ID 在文档内应是唯一的。如果文档中的两个或多个元素具有相同的 ID，则此方法将返回找到的第一个元素。

语法

js
getElementById(id)

注意: 此方法名称中的 "Id" 的大小写 必须 正确才能使代码正常运行；getElementByID() 无效 且不会起作用，无论它看起来多么自然。

参数

id

要查找的元素的 ID。ID 是区分大小写的字符串，在文档中是唯一的；只有一个元素应该具有任何给定的 ID。

返回值

一个 Element 对象，描述与指定 ID 匹配的 DOM 元素对象，如果在文档中未找到匹配的元素，则为 null。

示例

HTML

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

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

结果

使用说明

与 Document.querySelector() 和 Document.querySelectorAll() 等其他元素查找方法不同，getElementById() 只能作为全局 document 对象的方法使用，而 不能 作为 DOM 中所有元素对象的 方法使用。由于 ID 值在整个文档中必须是唯一的，因此不需要该函数的“本地”版本。

示例

html
<!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() 不会搜索不在文档中的元素。在创建元素并为其分配 ID 时，您必须使用 Node.insertBefore() 或类似方法将元素插入文档树中，然后才能使用 getElementById() 访问它。

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

在非 HTML 文档中，DOM 实现必须具有有关哪些属性是 ID 类型的信息。除非在文档的 DTD 中定义，否则名称为“id”的属性不属于 ID 类型。在 XHTML、XUL 等常见情况下，id 属性被定义为 ID 类型。无法确定属性是 ID 类型还是非 ID 类型的实现预计将返回 null。

规范

规范
DOM 标准
# ref-for-dom-nonelementparentnode-getelementbyid②

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

  • Document 用于获取对文档中元素的引用的其他方法和属性的参考。
  • Document.querySelector() 用于通过查询（如 'div.myclass'）进行选择。
  • Document.evaluate() - 具有一个实用程序方法，用于在 XML 文档中按 xml:id 进行选择。