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