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

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

语法:

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

返回值:

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

在这个例子中:

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

注意事项:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62197.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

游戏引擎学习第22天

移除 DllMain() 并成功重新编译 以下是对内容的详细复述与总结&#xff1a; 问题和解决方案&#xff1a; 在编译过程中遇到了一些问题&#xff0c;特别是如何告知编译器不要退出程序&#xff0c;而是继续处理。问题的根源在于编译过程中传递给链接器的参数设置不正确。原本尝试…

【C#设计模式(15)——命令模式(Command Pattern)】

前言 命令模式的关键通过将请求封装成一个对象&#xff0c;使命令的发送者和接收者解耦。这种方式能更方便地添加新的命令&#xff0c;如执行命令的排队、延迟、撤销和重做等操作。 代码 #region 基础的命令模式 //命令&#xff08;抽象类&#xff09; public abstract class …

QT6学习第四天 感受QT的文件编译

QT6学习第四天 感受QT的文件编译 使用纯代码编写程序新建工程 使用其他编辑器纯代码编写程序并在命令行运行使用 .ui 表单文件生成界面使用自定义 C 窗口类使用现成的QT Designer界面类 使用纯代码编写程序 我们知道QT Creator中可以用拖拽的方式在 .ui 文件上布局&#xff0c…

【SpringBoot】28 API接口防刷(Redis + 拦截器)

Gitee仓库 https://gitee.com/Lin_DH/system 介绍 常用的 API 安全措施包括&#xff1a;防火墙、验证码、鉴权、IP限制、数据加密、限流、监控、网关等&#xff0c;以确保接口的安全性。 常见措施 1&#xff09;防火墙 防火墙是网络安全中最基本的安全设备之一&#xff0c…

4——单页面应用程序,vue-cli脚手架

单页面应用程序(英文名:Single Page Application)简称 SPA,顾名 思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。 1、脚手架 ① 什么是脚手架 vue-cli 是 Vue.js 开发的标准工具&#xff61;它简化了程序员基于 webpack …

小程序 - 个人简历

为了让招聘人员快速地认识自己&#xff0c;可以做一个“个人简历”微信小程序&#xff0c; 展示自己的个人信息。 下面将对“个人简历”微信小程序进行详细讲解。 目录 个人简历 创建图片目录 页面开发 index.wxml index.wxss 功能实现截图 总结 个人简历 创建图片目录…

BUUCTF—Reverse—helloword(6)

一道安卓逆向的签到题 下载附件 使用JADX-gui反编译工具打开&#xff08;注意配环境&#xff09;&#xff0c;找到主函数 jadx 本身就是一个开源项目&#xff0c;源代码已经在 Github 上开源了 官方地址&#xff1a;GitHub - skylot/jadx: Dex to Java decompiler 发现flag …

单点登录深入详解之设计方案总结

基于cookie的单点登录解决方案 概述 用户登录之后 , 将认证信息存储至 Cookie &#xff0c;当再次访问本服务或者访问其他应用服务时&#xff0c;直接从 Cookie 中传递认证信息&#xff0c;进行鉴权处理。 问题 1. 如何保障Cookie内用户认证信息的安全性? 第一, Cookie…

JSONArray 与Object 之间的转换

PageResult<JSONArray> pageResult new PageResult<>();// 查出来的数据 JSONArray resultArray new JSONArray(); ject data new JSONObject();data.put("code", code); resultArray.add(data);// 将resultArray数据放入JSONArray,不是再包装成一个 …

cangjie (仓颉) vscode环境搭建

sdk下载 下载中心-仓颉编程语言官网 可选择半年更新版&#xff0c;不用申请。目前版本&#xff1a;0.53.13 &#xff0c;选择不同平台压缩包下载解压到任意位置即可 补充下载&#xff0c;vscode插件解压后&#xff0c;在vscode扩展中选择从vsix安装&#xff0c;安装后新增名为…

SmartSQL:一款方便、快捷的数据库文档查询、导出工具

&#x1f6a9; 项目介绍 SmartSQL 是一款方便、快捷的数据库文档查询、导出工具&#xff01;从最初仅支持SqlServer数据库、CHM文档格式开始&#xff0c;通过不断地探索开发、集思广益和不断改进&#xff0c;又陆续支持Word、Excel、PDF、Html、Xml、Json、MarkDown等文档格式…

IT监控 | Oracle云监控全解析

Oracle云(Oracle Cloud)是Oracle公司提供的云服务平台&#xff0c;涵盖了IaaS、PaaS、SaaS和DaaS&#xff0c;支持企业在云中构建、部署、集成和扩展应用&#xff0c;为企业提供了管理服务器、应用程序、存储、网络和数据中心的全面控制能力。 跟踪Oracle云基础设施的关键组件将…

攻防世界-web ics-06 [解法思路]

进入环境 点击左边的列表只有报表中心有反应 注意看url直接就是index.php?id1 我先试了sqlmap不行&#xff0c;然后就沉淀了一下 想到了id后面的参数问题&#xff0c;我谁便改了几个数都没反应 就想着用bp抓包爆一下这个参数&#xff0c;用了一个数字10000的字典 发现2333…

zotero安卓测试版下载和使用

2023年年底&#xff0c;Zotero官方就已经推出了安卓版的测试版Zotero for Android (beta),&#xff0c;但名额有限且只能通过Google商店下载。此外&#xff0c;还有一些第三方开发的安卓应用&#xff0c;如Zoo for Zotero、ZotDroid等。 在首次使用Zotero安卓版时&#xff0c;用…

洛谷 P1722 矩阵 II C语言 记忆化搜索

题目&#xff1a; https://www.luogu.com.cn/problem/P1722 我们按照案例画一下 我们会发现&#xff0c;会出现重复的子结构。 代码如下&#xff1a; #include<iostream> using namespace std; int mem[300][300]; int n; int f[305][305]; int dfs(int x,int red,…

MCU(一) 时钟详解 —— 以 GD32E103 时钟树结构为例

微控制器 (MCU) 的时钟系统是系统运行的核心&#xff0c;它提供了各模块所需的时钟信号。本文以 GD32E103 系列 MCU 为例&#xff0c;详细讲解其 时钟树结构&#xff08;Clock Tree&#xff09;。通过理解时钟源、分配与预分频器设置&#xff0c;可以灵活配置系统时钟以实现高性…

[HarmonyOS] 解决HMRouter路由地址无法抽取的问题

解决HMRouter路由地址无法抽取的问题 背景 最近开始学习HarmonyOS开发&#xff0c;搭建项目的时候采用了 HMRouter 路由框架&#xff0c;在项目里使用到路由跳转&#xff0c;官方链接在这&#xff1a; https://gitee.com/hadss/hmrouter/blob/master/HMRouterLibrary/README…

转录组数据挖掘(生物技能树)(第11节)下游分析

转录组数据挖掘&#xff08;生物技能树&#xff09;&#xff08;第11节&#xff09; 文章目录 R语言复习转录组数据差异分析差异分析的输入数据操作过程示例一&#xff1a;示例二&#xff1a;示例三&#xff1a;此代码只适用于人的样本 R语言复习 #### 读取 ####dat read.deli…

李宏毅机器学习课程知识点摘要(14-18集)

线性回归&#xff0c;逻辑回归&#xff08;线性回归sigmoid&#xff09;&#xff0c;神经网络 linear regression &#xff0c; logistic regression &#xff0c; neutral network 里面的偏导的相量有几百万维&#xff0c;这就是neutral network的不同&#xff0c;他是…

WonderJourney 学习笔记

目录 原理 所有场景的参数&#xff1a; 原理 Pytorch3D&#xff1a;用于高性能的3D渲染&#xff0c;确保生成的场景具有高度的真实感和细节。GPT-4&#xff1a;通过生成场景描述&#xff0c;为每一帧提供丰富的背景故事和情感。MiDaS&#xff1a;用于深度估计&#xff0c;确…