文档片段：getElementById() 方法

getElementById() 是 DocumentFragment 的一个方法，它返回一个表示元素的 Element 对象，该元素的 id 属性与指定的字符串匹配。由于如果指定了元素 ID，则需要唯一，因此它们是快速访问特定元素的实用方法。

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

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

语法

getElementById(id)

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

参数

id: 要定位的元素的 ID。ID 是一个区分大小写的字符串，在文档片段内是唯一的：只有一个元素应该具有任何给定的 ID。

返回值

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

示例

扩展元素列表

在此示例中，文档包含一个只有一个项目 Cherry 的列表。我们还创建一个包含四个更多项目的文档片段，Apple、Orange、Banana 和 Melon。

然后，我们记录使用 getElementById() 在文档和片段中查找 Apple 和 Cherry 的结果。此时，Cherry 仅出现在文档中，而 Apple 仅出现在片段中。

如果单击“将片段添加到文档”，我们将片段附加到文档内的列表中，并再次记录在文档和片段中查找 Apple 和 Cherry 的结果。这次，Apple 和 Cherry 都出现在文档中，并且两者都不出现在片段中。

这是因为将片段附加到文档会将片段的节点移动到 DOM 中，留下一个空的 DocumentFragment。

HTML

html

<button id="add">Add fragment to document</button>
<button id="reset">Reset example</button> <br />
List content:
<ul>
  <li id="Cherry">Cherry</li>
</ul>
Fragment content:
<ul id="fragment"></ul>
Current status:
<pre id="log" />

button {
  margin-bottom: 10px;
}

JavaScript

// Create the document fragment with its initial content
const fragment = new DocumentFragment();
["Apple", "Orange", "Banana", "Melon"].forEach((fruit) => {
  const li = document.createElement("li");
  li.textContent = fruit;
  li.id = fruit;
  fragment.append(li);
});

// When the button is clicked, add the fragment to the list
document.getElementById("add").addEventListener("click", () => {
  document.querySelector("ul").append(fragment);
  displayStatus();
});

// Log the results of both getElementById()
function displayStatus() {
  const log = document.getElementById("log");
  log.textContent = "";
  ["Apple", "Cherry"].forEach((id) => {
    log.textContent += `document.getElementById("${id}") ${
      document.getElementById(id) ? "Yes" : "No"
    }\n`;
    log.textContent += `fragment.getElementById("${id}") ${
      fragment.getElementById(id) ? "Yes" : "No"
    }\n`;
  });

  // Empty the fragment viewer and fill it with the current content
  const fragmentViewer = document.getElementById("fragment");
  while (fragmentViewer.hasChildNodes()) {
    fragmentViewer.removeChild(fragmentViewer.lastChild);
  }
  for (entry of fragment.children) {
    fragmentViewer.appendChild(entry.cloneNode(true));
  }
}

// Log the initial state
displayStatus();

// Hook the reset button
document.getElementById("reset").addEventListener("click", () => {
  document.location.reload();
});

结果

规范

规范
DOM 标准 # dom-nonelementparentnode-getelementbyid

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Document.getElementById()