【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)更为快速。
相关推荐
徐小夕3 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK1 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
雨过天晴而后无语2 小时前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
qq. 28040339842 小时前
react hooks
前端·javascript·react.js
LHX sir3 小时前
什么是UIOTOS?
前端·前端框架·编辑器·团队开发·个人开发·web