【WEB开发.js】getElementById ：通过元素id属性获取HTML元素
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）更为快速。