【WEB开发.js】getElementById ：通过元素id属性获取HTML元素

getElementById 是 JavaScript 中常用的一个 DOM 方法，用于通过元素的 id 属性获取文档中对应的 HTML 元素。这个方法返回的是一个包含该元素的引用，如果没有找到指定的元素，则返回 null。

语法：

javascript 复制代码

document.getElementById(id);

id ：一个字符串，表示目标元素的 id 属性值。id 必须是唯一的，即在一个文档中不能有多个元素拥有相同的 id。

返回值：

如果找到具有指定 id 的元素，返回该元素对象（如 HTMLDivElement、HTMLInputElement 等）。
如果没有找到该元素，返回 null。

示例：

假设有一个简单的 HTML 页面：

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!"。

常见用法：

修改内容：

javascript 复制代码

document.getElementById("example").innerHTML = "New Content";

修改样式：

javascript 复制代码

document.getElementById("example").style.color = "blue";

访问输入字段的值：

javascript 复制代码

var inputValue = document.getElementById("inputField").value;

控制可见性：

javascript 复制代码

document.getElementById("example").style.display = "none"; // 隐藏元素

注意事项：

id 在整个文档中应该是唯一的，如果存在多个相同 id 的元素，getElementById 只会返回第一个找到的元素。
getElementById 是最常用和高效的 DOM 查询方法之一，因此它在大多数情况下会比其他方法（如 querySelector）更为快速。