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
)更为快速。