当前位置： 首页 > news >正文

常见的获取dom元素的方法

news 2026/5/18 23:30:22

获取 DOM 元素是前端开发中非常常见的操作。以下是几种常用的方法来获取 DOM 元素，以及它们的适用场景和示例：

1. getElementById

用于获取具有指定 id 属性的元素。

示例
let element = document.getElementById('myId');

2. getElementsByClassName

用于获取具有指定 class 名的所有元素，返回一个动态的 HTMLCollection。

示例
let elements = document.getElementsByClassName('myClass');

3. getElementsByTagName

用于获取具有指定标签名的所有元素，返回一个动态的 HTMLCollection。

示例
let elements = document.getElementsByTagName('div');

4. querySelector

用于获取匹配指定 CSS 选择器的第一个元素。

示例
let element = document.querySelector('.myClass');

5. querySelectorAll

用于获取匹配指定 CSS 选择器的所有元素，返回一个 NodeList。

示例
let elements = document.querySelectorAll('.myClass');

6. getElementsByName

用于获取具有指定 name 属性的所有元素，返回一个 NodeList。

示例
let elements = document.getElementsByName('myName');

详细示例

以下是一个包含所有上述方法的详细示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Get DOM Elements Example</title>
</head>
<body><div id="myId">Element with ID</div><div class="myClass">First Element with Class</div><div class="myClass">Second Element with Class</div><p>Paragraph</p><p class="myClass">Paragraph with Class</p><input type="text" name="myName" value="Input Element"><script>// 获取具有指定 ID 的元素let elementById = document.getElementById('myId');console.log(elementById); // 输出: <div id="myId">Element with ID</div>// 获取具有指定类名的所有元素let elementsByClassName = document.getElementsByClassName('myClass');console.log(elementsByClassName); // 输出: HTMLCollection(3) [div.myClass, div.myClass, p.myClass]// 获取具有指定标签名的所有元素let elementsByTagName = document.getElementsByTagName('p');console.log(elementsByTagName); // 输出: HTMLCollection(2) [p, p.myClass]// 获取匹配指定选择器的第一个元素let elementByQuerySelector = document.querySelector('.myClass');console.log(elementByQuerySelector); // 输出: <div class="myClass">First Element with Class</div>// 获取匹配指定选择器的所有元素let elementsByQuerySelectorAll = document.querySelectorAll('.myClass');console.log(elementsByQuerySelectorAll); // 输出: NodeList(3) [div.myClass, div.myClass, p.myClass]// 获取具有指定名称的所有元素let elementsByName = document.getElementsByName('myName');console.log(elementsByName); // 输出: NodeList [input[name="myName"]]</script>
</body>
</html>

使用建议

  • getElementById: 适用于获取单个元素时，ID 在文档中应该是唯一的。
  • getElementsByClassName 和 getElementsByTagName: 返回的 HTMLCollection 是实时更新的，适合需要动态响应 DOM 变化的情况。
  • querySelector 和 querySelectorAll: 支持复杂的 CSS 选择器，适合需要精确匹配的情况。querySelectorAll 返回的 NodeList 是静态的，不会动态更新。
  • getElementsByName: 常用于表单元素，name 属性在表单中具有特殊意义。

相关文章：

常见的获取dom元素的方法

获取 DOM 元素是前端开发中非常常见的操作。以下是几种常用的方法来获取 DOM 元素&#xff0c;以及它们的适用场景和示例&#xff1a; 1. getElementById 用于获取具有指定 id 属性的元素。 示例 let element document.getElementById(myId); 2. getElementsByClassName …...

编程日记 2024/5/10 15:15:37

走进CHEN MEI HUA的设计哲学：书写东方女性力量与态度的时尚篇章

在时尚的舞台中央&#xff0c;品牌不止是商品&#xff0c;更是故事的讲述者、文化的传承者。CHEN MEI HUA&#xff0c;一个源自中国上海的高端女装品牌&#xff0c;以其独特的设计理念及文化内核&#xff0c;成为了时尚界一颗耀眼的明珠。今天&#xff0c;让我们一起走进CMH的世…...

编程日记 2024/5/10 15:12:32

ESrally单机向量检索性能测试全流程

ESrally单机向量检索性能测试全流程 测试方案的尝试 准备测试 ES 的向量检索性能，Vespa 方案由于下载依赖库存在网络问题无法执行成功，终止；开源工具 ann-benchamrk 是一个用于评估近似最近邻（ANN）搜索库的性能测试工具，这个本是最佳选择，但是也由于需要 pip 安装几十…...

编程日记 2024/5/10 15:11:31

小红书释放被封手机号 无限注册

前几年抖音也可以释放被封手机号 那时候都不重视 导致现在被封手机号想释放 基本不可能的 或者就是最少几百块 有专业的人帮你通过某些信息差释放 本教程是拆解 小红书被封手机号怎么释放&#xff0c;从今年开始&#xff0c;被封的手机号无法注销了 所以很困扰 那么本教程来…...

编程日记 2024/5/10 15:10:29

Docker快速启动清单

以下容器均使用 Docker version 24.0.2 版本测试使用&#xff0c;这里需要注意一下&#xff0c;高版本的Docker不支持镜像V1版本&#xff0c;不知道怎么操作才可以让它支持&#xff0c;所以推荐使用低版本 如果觉得不直观&#xff0c;或者觉得有点乱&#xff0c;可以访问以下网…...

编程日记 2024/5/10 15:08:26

京东手势验证码-YOLO姿态识别+Bézier curve轨迹拟合

这次给老铁们带来的是京东手势验证码的识别。 目标网站&#xff1a;https://plogin.m.jd.com/mreg/index 验证码如下图: 当第一眼看到这个验证码的时候&#xff0c;就头大了&#xff0c;这玩意咋识别&#xff1f;&#xff1f;&#xff1f; 静下心来细想后的一个方案&#xf…...

编程日记 2024/5/10 15:07:24

亚马逊是如何铺设多个IP账号实现销量大卖的？

一、针对亚马逊平台机制&#xff0c;如何转变思路&#xff1f; 众所周知&#xff0c;一个亚马逊卖家只能够开一个账号&#xff0c;一家店铺&#xff0c;这是亚马逊平台明确规定的。平台如此严格限定&#xff0c;为的就是保护卖家&#xff0c;防止卖家重复铺货销售相同的产品&a…...

编程日记 2024/5/10 15:06:23

linux学习笔记——硬盘原理以及linux中的sector与block

在计算机硬盘中&#xff0c;最小的存储单位叫做扇区sector&#xff0c;0.5kb&#xff0c;多个连续扇区组合在一起形成了块block&#xff0c;最小的块包含8个扇区&#xff0c;4kb 我们可以在linux中印证 创建一个新的文件2.txt&#xff0c;查看文件大小为0k 在文件中添加字符后…...

编程日记 2024/5/10 15:02:18

【OceanBase诊断调优】—— 磁盘性能问题导致卡合并和磁盘写入拒绝排查

适用版本 OceanBase 数据库 V3.x、V4.x 版本。 问题现象 OceanBase 集群合并一直未完成&#xff0c;同时 tsar 和 iostat 显示从凌晨 2:30 开始磁盘使用率一直是 100%。怀疑合并导致 IO 上升&#xff0c;IO 可能存在问题&#xff0c;observer.log 的确有大量报错 disk is hu…...

编程日记 2024/5/10 15:01:16

使用unreal engine5.3.2创建c++第一人称游戏

UE5系列文章目录 文章目录 UE5系列文章目录前言一、NuGet 简介二、解决方法&#xff1a; 前言 为了使用unreal engine5.3.2创建c第一人称游戏&#xff0c;今天安装了Visual Studio 2022专业版。在ue5中创建c工程&#xff0c;结果编译器报错&#xff1a; 严重性 代码 说明 项目…...

编程日记 2024/5/10 15:00:14

关系型数据库的一种自动测评方式

关系型数据库在如今已经是一门比较常用以及重要的技术，现在的大部分应用程序系统都构建于关系型数据库系统之上，数据库技能也是每个IT从业人员的必备技能之一，因此一些高校、培训学校等机构都把数据库课程作为必修课程之一。这就牵涉到考核的问题了，对于学生是否掌握该门技…...

编程日记 2024/5/10 14:58:11

速盾：服务器cdn加速的具体实现方式？

CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;是一种通过分布在各个地理位置的边缘节点服务器来缓存和传输网络内容的技术。CDN的主要目标是提高用户访问网站的速度和性能&#xff0c;并减轻源服务器的负载。 CDN加速是通过以下几个步骤来实…...

编程日记 2024/5/10 14:57:09

【QT教程】QT6音视频处理权威指南 QT音视频

QT6音视频处理权威指南 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费…...

编程日记 2024/5/10 14:56:08

cmd输入mysql -u root -p无法启动

问题分析&#xff1a;cmd输入mysql -u root -p无法启动 解决方法&#xff1a;配置系统环境变量 1.找到mysql安装文件下的bin文件&#xff1a;&#xff08;复制改文件地址,如下图所示&#xff09; 2.电脑桌面下方直接搜索环境变量并进入&#xff0c;如下图 3.点击环境变量&a…...

编程日记 2024/5/10 14:55:06

word 毕业论文格式调整

添加页眉页脚 页眉 首先在页面上端页眉区域双击&#xff0c;即可出现“页眉和页脚”设置页面&#xff1a; 页眉左右两端对齐 如果想要页眉页脚左右两端对齐&#xff0c;可以选择添加三栏页眉&#xff0c;然后将中间那一栏删除&#xff0c;即可自动实现左右两端对齐&#x…...

编程日记 2024/5/10 14:53:01

移动UI瓷片区能有多漂亮？要多漂亮就多漂亮。

移动UI的瓷片区&#xff08;Tile area&#xff09;是指移动应用或移动网页的界面布局中的一个区域&#xff0c;通常用于展示独立的信息块或功能块&#xff0c;每个块都是一个可点击的图标或瓷片&#xff0c;用于快速访问相关功能或查看相关信息。 瓷片区的设计灵感来源于Window…...

编程日记 2024/5/10 14:49:56

SpringCloud Config 分布式配置中心

SpringCloud Config 分布式配置中心 概述分布式系统面临的——配置问题ConfigServer的作用 Config服务端配置Config客户端配置 可以有一个非常轻量级的集中式管理来协调这些服务 概述 分布式系统面临的——配置问题 微服务意味着要将单体应用中的业务拆分成一个个字服务&…...

编程日记 2024/5/10 14:48:54

Java入门基础学习笔记2——JDK的选择下载安装

搭建Java的开发环境&#xff1a; Java的产品叫JDK&#xff08;Java Development Kit&#xff1a; Java开发者工具包&#xff09;&#xff0c;必须安装JDK才能使用Java。 JDK的发展史&#xff1a; LTS&#xff1a;Long-term Support&#xff1a;长期支持版。指的Java会对这些版…...

编程日记 2024/5/10 14:47:53

基于FPGA的去雾算法

去雾算法的原理是基于图像去模糊的原理&#xff0c;通过对图像中的散射光进行估计和去除来消除图像中的雾霾效果。 去雾算法通常分为以下几个步骤&#xff1a; 1. 导引滤波&#xff1a;首先使用导引滤波器对图像进行滤波&#xff0c;目的是估计图像中散射光的强度。导引滤波器…...

编程日记 2024/5/10 14:45:49

专题六_模拟(2)

目录 6. Z 字形变换 解析 题解 38. 外观数列 解析 题解 6. Z 字形变换 6. Z 字形变换 - 力扣&#xff08;LeetCode&#xff09; 解析 题解 class Solution { public:string convert(string s, int numRows) {// 42.专题六_模拟_N 字形变换_C// 处理边界情况if (numRows …...

编程日记 2024/5/10 14:44:47

Go语言命令行交互库promptui实战：打造专业CLI工具

1. 项目概述&#xff1a;一个让命令行交互“活”起来的工具如果你经常和命令行打交道&#xff0c;无论是管理服务器、运行自动化脚本&#xff0c;还是开发调试&#xff0c;肯定遇到过需要用户输入参数的情况。传统的做法是使用read命令&#xff0c;或者在脚本里写死参数&#x…...

编程新知 2026/5/18 22:24:03

AI写教材新突破！低查重工具，快速生成完整教材框架与内容！

教材编写困境与 AI 工具的破局之道 很多教材编写者常常感到困扰&#xff1a;尽管他们在正文内容上付出了大量心血&#xff0c;但由于缺乏配套资源&#xff0c;最终的教学效果难以理想化。设计课后练习时&#xff0c;缺乏新颖的题型构思&#xff1b;想制作直观的教学课件&#…...

编程新知 2026/5/18 20:59:22

STM32 PVD中断防数据丢失实战：手把手教你配置2.9V阈值与紧急保存逻辑

STM32 PVD中断防数据丢失实战&#xff1a;手把手教你配置2.9V阈值与紧急保存逻辑 当嵌入式设备在野外采集数据或进行关键操作时&#xff0c;突然断电可能导致数月积累的传感器数据毁于一旦。我曾在一个农业物联网项目中亲历这种灾难——某次田间设备因电池接触不良断电&#xf…...

编程新知 2026/5/18 20:33:09

Nacos生产级集群部署实战：从架构设计到高可用验证

1. 项目概述&#xff1a;为什么Nacos集群部署是微服务架构的“定海神针” 在微服务架构的实践中&#xff0c;服务注册与发现、配置管理是两块基石。Nacos作为Spring Cloud Alibaba生态的核心组件&#xff0c;集这两大功能于一身&#xff0c;其重要性不言而喻。当你的业务从单机…...

编程新知 2026/5/18 19:33:09

Linux内核模块开发实战：用filp_open和vfs_read实现一个简易配置文件读取器

Linux内核模块开发实战&#xff1a;用filp_open和vfs_read实现一个简易配置文件读取器 在Linux内核开发中&#xff0c;有时我们需要在内核态直接读取用户空间的配置文件。这种需求常见于需要动态加载配置的驱动程序、内核日志系统或特殊的内核服务。本文将带你从零开始构建一个…...

编程新知 2026/5/18 19:31:03

VisualHMI LUA脚本中get_float与set_float函数实战详解

1. 项目概述&#xff1a;从界面到逻辑的桥梁在工业HMI&#xff08;人机界面&#xff09;开发中&#xff0c;我们常常会遇到一个看似简单却至关重要的需求&#xff1a;如何让屏幕上显示的一个数值&#xff0c;与背后控制器&#xff08;如PLC&#xff09;里的一个浮点数寄存器精准…...

编程新知 2026/5/18 18:36:59

求职时间管理神器：3秒智能标记招聘岗位时效性实战指南

求职时间管理神器&#xff1a;3秒智能标记招聘岗位时效性实战指南 【免费下载链接】NewJob 一眼看出该职位最后修改时间&#xff0c;绿色为2周之内&#xff0c;暗橙色为1.5个月之内&#xff0c;红色为1.5个月以上 项目地址: https://gitcode.com/GitHub_Trending/ne/NewJob …...

编程新知 2026/5/18 17:44:06

K210数字识别数据集采集的两种实用方法：串口定时与按键触发，哪种更适合你的电赛项目？

K210数字识别数据集采集实战&#xff1a;串口定时与按键触发的深度对比与优化方案 在嵌入式AI与电赛项目中&#xff0c;数据采集的质量往往决定了模型识别的上限。K210作为边缘计算设备的性价比之选&#xff0c;其数据采集方案的合理性直接影响后续模型训练效果。本文将深入剖…...

编程新知 2026/5/18 17:39:52

离线语音模块在塔扇智能化中的集成与应用实践

1. 项目概述&#xff1a;当塔扇“听懂”你的话 家里的塔式风扇&#xff0c;你是不是也经常遇到这样的场景&#xff1a;晚上躺在床上&#xff0c;风扇对着吹有点冷&#xff0c;想调小一档或者关掉&#xff0c;结果发现遥控器不知道被塞到哪个沙发缝里了&#xff0c;只能挣扎着爬…...

编程新知 2026/5/18 15:06:09

200块搞定AI视觉项目：手把手教你用Canmv K210训练识别模型（附完整代码）

200元打造AI视觉神器&#xff1a;Canmv K210从模型训练到落地实战指南 在AI技术快速普及的今天&#xff0c;动辄数千元的开发套件让许多创客和学生望而却步。Canmv K210开发板的出现彻底改变了这一局面——仅需200元预算&#xff0c;就能搭建完整的AI视觉识别系统。本文将带你从…...

编程新知 2026/5/18 15:04:08