JavaScript getElementById 查找元素
document.getElementById 方法返回一个 Element 对象，该对象是具有与指定 id 属性匹配的 HTML 元素
在本教程中，您将学习如何使用 JavaScript 的 DOM API 的 getElementById 方法通过指定 id 选择元素。
JavaScript getElementById 方法简介
document.getElementById 方法返回一个 Element 对象，该对象是具有与指定 id 属性的 HTML 元素。
如果 HTML 文档没有包含指定 id 的元素，则 document.getElementById() 返回null。
由于元素的 id 在 HTML 文档中是唯一的，因此 document.getElementById() 是获取元素的最快方法。
与 querySelector() 方法不同的是，getElementById() 只能在 document 对象使用，而不能在其他元素上使用。
getElementById() 语法如下所示：
const element = document.getElementById(id);在此语法中，id 是一个字符串，表示要选择的元素的 id。ID 区分大小写。例如，'root' 和 'Root' 是不相同的。
在 HTML 文档中 id 是唯一的。然而，HTML 是一种宽松的语言。如果 HTML 文档具有多个相同 id 的元素，则 document.getElementById() 方法返回 HTML 文档的第一个元素。
JavaScript getElementById 方法示例
假设您有以下 HTML 文档：
<html>
<head>
<title>JavaScript getElementById() Method</title>
</head>
<body>
<p id="message">A paragraph</p>
</body>
</html>该文档包含一个id 属性，值为 message 的 <p> 元素：
const p = document.getElementById('message');
console.log(p);输出：
<p id="message">A paragraph</p>选择元素后，您可以为元素添加样式、操作其属性以及遍历父元素和子元素。
结论
document.getElementById() 通过指定的 id 查找 DOM 元素，如果未找到匹配的元素，则返回 null。如果多个元素具有相同的 id，getElementById() 也会返回它遇到的第一个元素。
