【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)更为快速。
相关推荐
Bellafu6661 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构