getElementById 是 JavaScript 中常用的一个 DOM 方法,用于通过元素的 id 属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用,如果没有找到指定的元素,则返回 null。
语法:
document.getElementById(id);
- id:一个字符串,表示目标元素的
id属性值。id必须是唯一的,即在一个文档中不能有多个元素拥有相同的id。
返回值:
- 如果找到具有指定
id的元素,返回该元素对象(如HTMLDivElement、HTMLInputElement等)。 - 如果没有找到该元素,返回
null。
示例:
假设有一个简单的 HTML 页面:
<!DOCTYPE html>
<html>
<head><title>getElementById Example</title>
</head>
<body><div id="message">Hello, world!</div><button id="changeTextBtn">Change Text</button><script>// 获取元素var messageElement = document.getElementById("message");var buttonElement = document.getElementById("changeTextBtn");// 为按钮添加点击事件buttonElement.onclick = function() {messageElement.textContent = "Text has been changed!";};</script>
</body>
</html>
在这个例子中:
document.getElementById("message")获取到id="message"的<div>元素。document.getElementById("changeTextBtn")获取到id="changeTextBtn"的<button>元素。
当用户点击按钮时,message 元素的文本会被修改为 "Text has been changed!"。
常见用法:
-
修改内容:
document.getElementById("example").innerHTML = "New Content"; -
修改样式:
document.getElementById("example").style.color = "blue"; -
访问输入字段的值:
var inputValue = document.getElementById("inputField").value; -
控制可见性:
document.getElementById("example").style.display = "none"; // 隐藏元素
注意事项:
id在整个文档中应该是唯一的,如果存在多个相同id的元素,getElementById只会返回第一个找到的元素。getElementById是最常用和高效的 DOM 查询方法之一,因此它在大多数情况下会比其他方法(如querySelector)更为快速。