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

常见的获取dom元素的方法

news 2026/2/5 16:10:54

获取 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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/1/24 13:16:33

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46