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

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

语法:

javascript 复制代码
document.getElementById(id);
  • id :一个字符串,表示目标元素的 id 属性值。id 必须是唯一的,即在一个文档中不能有多个元素拥有相同的 id

返回值:

  • 如果找到具有指定 id 的元素,返回该元素对象(如 HTMLDivElementHTMLInputElement 等)。
  • 如果没有找到该元素,返回 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>

在这个例子中:

  1. document.getElementById("message") 获取到 id="message"<div> 元素。
  2. 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"; // 隐藏元素

注意事项:

  1. id 在整个文档中应该是唯一的,如果存在多个相同 id 的元素,getElementById 只会返回第一个找到的元素。
  2. getElementById 是最常用和高效的 DOM 查询方法之一,因此它在大多数情况下会比其他方法(如 querySelector)更为快速。
相关推荐
轻语呢喃2 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人3 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD4 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟5 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire6 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH6 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_7 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
自由逐风7 分钟前
前端小数点精度问题解析
javascript
断竿散人7 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter8 分钟前
js中继承关系杂乱?这篇带你理清
javascript