JavaScript getElementById

概要: 在本教程中，您将学习如何使用 JavaScript getElementById() 通过 ID 选择元素。

JavaScript getElementById() 方法简介

getElementById() 是 document 对象的一种方法，它返回一个表示具有与指定字符串匹配的 ID 的 HTML 元素的 Element 对象。

以下是 getElementById() 方法的语法

const element = document.getElementById(id);Code language: JavaScript (javascript)

在此语法中

• id 是一个字符串，表示要选择的元素的 ID。

请注意，此方法对 ID 进行区分大小写匹配。例如，'root' 和 'Root' 是不同的。

如果文档中没有具有指定 ID 的元素，则 getElementById() 方法将返回 null。

与 querySelector() 方法不同，getElementById() 仅在 document 对象上可用，而不是其他 DOM 元素上。

通常，id 在 HTML 文档中是唯一的。但是，HTML 是一种宽容的语言。非良好格式的 HTML 可能包含多个具有相同 ID 的元素。在这种情况下，getElementById() 方法将返回它遇到的第一个元素。

JavaScript getElementById() 方法示例

假设您有一个文档包含两个 p 元素

<p id="first">Hi, There!</p>
<p>JavaScript is fun.</p>Code language: HTML, XML (xml)

以下代码展示了如何获取 ID 为 first 的元素

const elem = document.getElementById("first");Code language: JavaScript (javascript)

请查看以下演示

请注意，在选择元素后，您可以 应用样式，操作其 属性，以及遍历到 父元素 和 子元素。

概要

• document.getElementById() 返回由 id 指定的 DOM 元素，如果未找到匹配的元素，则返回 null。
• 如果多个元素具有相同的 id（即使这是无效的），getElementById() 将返回它遇到的第一个元素。

测验