常见的获取dom元素的方法
获取 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 元素，以及它们的适用场景和示例： 1. getElementById 用于获取具有指定 id 属性的元素。 示例 let element document.getElementById(myId); 2. getElementsByClassName …...
走进CHEN MEI HUA的设计哲学：书写东方女性力量与态度的时尚篇章
在时尚的舞台中央，品牌不止是商品，更是故事的讲述者、文化的传承者。CHEN MEI HUA，一个源自中国上海的高端女装品牌，以其独特的设计理念及文化内核，成为了时尚界一颗耀眼的明珠。今天，让我们一起走进CMH的世…...
ESrally单机向量检索性能测试全流程
ESrally单机向量检索性能测试全流程 测试方案的尝试 准备测试 ES 的向量检索性能，Vespa 方案由于下载依赖库存在网络问题无法执行成功，终止；开源工具 ann-benchamrk 是一个用于评估近似最近邻（ANN）搜索库的性能测试工具，这个本是最佳选择，但是也由于需要 pip 安装几十…...
小红书释放被封手机号 无限注册
前几年抖音也可以释放被封手机号 那时候都不重视 导致现在被封手机号想释放 基本不可能的 或者就是最少几百块 有专业的人帮你通过某些信息差释放 本教程是拆解 小红书被封手机号怎么释放，从今年开始，被封的手机号无法注销了 所以很困扰 那么本教程来…...
Docker快速启动清单
以下容器均使用 Docker version 24.0.2 版本测试使用，这里需要注意一下，高版本的Docker不支持镜像V1版本，不知道怎么操作才可以让它支持，所以推荐使用低版本 如果觉得不直观，或者觉得有点乱，可以访问以下网…...
京东手势验证码-YOLO姿态识别+Bézier curve轨迹拟合
这次给老铁们带来的是京东手势验证码的识别。 目标网站：https://plogin.m.jd.com/mreg/index 验证码如下图: 当第一眼看到这个验证码的时候，就头大了，这玩意咋识别？？？ 静下心来细想后的一个方案…...
亚马逊是如何铺设多个IP账号实现销量大卖的？
一、针对亚马逊平台机制，如何转变思路？ 众所周知，一个亚马逊卖家只能够开一个账号，一家店铺，这是亚马逊平台明确规定的。平台如此严格限定，为的就是保护卖家，防止卖家重复铺货销售相同的产品&a…...
linux学习笔记——硬盘原理以及linux中的sector与block
在计算机硬盘中，最小的存储单位叫做扇区sector，0.5kb，多个连续扇区组合在一起形成了块block，最小的块包含8个扇区，4kb 我们可以在linux中印证 创建一个新的文件2.txt，查看文件大小为0k 在文件中添加字符后…...
【OceanBase诊断调优】—— 磁盘性能问题导致卡合并和磁盘写入拒绝排查
适用版本 OceanBase 数据库 V3.x、V4.x 版本。 问题现象 OceanBase 集群合并一直未完成，同时 tsar 和 iostat 显示从凌晨 2:30 开始磁盘使用率一直是 100%。怀疑合并导致 IO 上升，IO 可能存在问题，observer.log 的确有大量报错 disk is hu…...
使用unreal engine5.3.2创建c++第一人称游戏
UE5系列文章目录 文章目录 UE5系列文章目录前言一、NuGet 简介二、解决方法： 前言 为了使用unreal engine5.3.2创建c第一人称游戏，今天安装了Visual Studio 2022专业版。在ue5中创建c工程，结果编译器报错： 严重性 代码 说明 项目…...
关系型数据库的一种自动测评方式
关系型数据库在如今已经是一门比较常用以及重要的技术，现在的大部分应用程序系统都构建于关系型数据库系统之上，数据库技能也是每个IT从业人员的必备技能之一，因此一些高校、培训学校等机构都把数据库课程作为必修课程之一。这就牵涉到考核的问题了，对于学生是否掌握该门技…...
速盾：服务器cdn加速的具体实现方式？
CDN（Content Delivery Network）即内容分发网络，是一种通过分布在各个地理位置的边缘节点服务器来缓存和传输网络内容的技术。CDN的主要目标是提高用户访问网站的速度和性能，并减轻源服务器的负载。 CDN加速是通过以下几个步骤来实…...
【QT教程】QT6音视频处理权威指南 QT音视频
QT6音视频处理权威指南 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费…...
cmd输入mysql -u root -p无法启动
问题分析：cmd输入mysql -u root -p无法启动 解决方法：配置系统环境变量 1.找到mysql安装文件下的bin文件：（复制改文件地址,如下图所示） 2.电脑桌面下方直接搜索环境变量并进入，如下图 3.点击环境变量&a…...
word 毕业论文格式调整
添加页眉页脚 页眉 首先在页面上端页眉区域双击，即可出现“页眉和页脚”设置页面： 页眉左右两端对齐 如果想要页眉页脚左右两端对齐，可以选择添加三栏页眉，然后将中间那一栏删除，即可自动实现左右两端对齐&#x…...
移动UI瓷片区能有多漂亮？要多漂亮就多漂亮。
移动UI的瓷片区（Tile area）是指移动应用或移动网页的界面布局中的一个区域，通常用于展示独立的信息块或功能块，每个块都是一个可点击的图标或瓷片，用于快速访问相关功能或查看相关信息。 瓷片区的设计灵感来源于Window…...
SpringCloud Config 分布式配置中心
SpringCloud Config 分布式配置中心 概述分布式系统面临的——配置问题ConfigServer的作用 Config服务端配置Config客户端配置 可以有一个非常轻量级的集中式管理来协调这些服务 概述 分布式系统面临的——配置问题 微服务意味着要将单体应用中的业务拆分成一个个字服务&…...
Java入门基础学习笔记2——JDK的选择下载安装
搭建Java的开发环境： Java的产品叫JDK（Java Development Kit： Java开发者工具包），必须安装JDK才能使用Java。 JDK的发展史： LTS：Long-term Support：长期支持版。指的Java会对这些版…...
基于FPGA的去雾算法
去雾算法的原理是基于图像去模糊的原理，通过对图像中的散射光进行估计和去除来消除图像中的雾霾效果。 去雾算法通常分为以下几个步骤： 1. 导引滤波：首先使用导引滤波器对图像进行滤波，目的是估计图像中散射光的强度。导引滤波器…...
专题六_模拟(2)
目录 6. Z 字形变换 解析 题解 38. 外观数列 解析 题解 6. Z 字形变换 6. Z 字形变换 - 力扣（LeetCode） 解析 题解 class Solution { public:string convert(string s, int numRows) {// 42.专题六_模拟_N 字形变换_C// 处理边界情况if (numRows …...
[qnx] 通过zcu104 SD卡更新qnx镜像的步骤
0. 概述 本文演示如果给Xlinx zcu104开发板刷入自定义的qnx镜像 1.将拨码开关设置为SD卡启动 如下图所示，将1拨到On,2,3,4拨到Off，即为通过SD启动。 2.准备SD卡中的内容 首先需要将SD格式化为FAT32的（如果已经是FAT32格式，则…...
论文AIGC检测让毕业生头疼，如何有效降低AI查重率！
在准备毕业论文的过程中，不知道大家有没有跟我一样，遇到这样棘手的问题。我们都知道在撰写完论文后，进行论文查重是我们必不可少的一步。于是，我拿着论文进行了论文重复率的检测，发现重复率只有2.8%，看到这…...
FineBI学习：K线图
效果图 底表结构：日期、股票代码、股票名称、开盘价、收盘价、最高价、最低价 步骤： 横轴：日期 纵轴：开盘价、最低价 选择【自定义图表】，或【瀑布图】 新建字段：价差（收盘-开盘…...
Chronos：学习时间序列的大语言模型（代码解析）
前言 《Chronos: Learning the Language of Time Series》原文地址，Github开源代码地址Chronos：学习时间序列的大语言模型（论文解读）CSDN地址GitHub项目地址Some-Paper-CN。本项目是译者在学习长时间序列预测、CV、NLP和机器学习…...
云南区块链商户平台优化开发
背景 云南区块链商户平台是全省统一区块链服务平台。依托于云南省发改委、阿里云及蚂蚁区块链的国内首个省级区块链平台——云南省区块链平台同步上线，助力数字云南整体升级。 网页版并不适合妈妈那辈人使用，没有记忆功能，于是打算自己开发…...
深圳六西格玛培训：引领职场“薪”途无限
在追求职业发展和薪资增长的道路上，不断学习和提升自我是至关重要的。深圳，这座充满活力和创新精神的城市，为职场人士提供了众多学习和提升的机会。其中，六西格玛培训以其独特的价值，吸引了众多职场人士的目光。张驰咨…...
Spark云计算平台Databricks使用，创建workspace和Compute计算集群（Spark集群）
Databricks，是属于 Spark 的商业化公司，由美国加州大学伯克利 AMP 实验室的 Spark 大数据处理系统多位创始人联合创立。Databricks 致力于提供基于 Spark 的云服务，可用于数据集成，数据管道等任务。 1 创建workspace 点击创建wor…...
银河麒麟服务器系统audit服务组件升级、进程彻底关闭介绍
银河麒麟服务器系统audit服务组件升级、进程彻底关闭介绍 一 系统环境二 组件升级2.1 联网升级audit2.1.1 配置外网源（默认配置如下，不用修改）2.1.2 通过dnf命令进行升级（未指定版本的话会升级到最新se.12版本，建议升级…...
设计模式——装饰者模式（Decorator）
装饰者模式（Decorator Pattern）是一种结构型设计模式，它允许你动态地给一个对象添加一些额外的职责，就增加功能来说，装饰者模式相比生成子类更为灵活。在装饰者模式中，一个装饰类会包装一个对象（…...
力扣：406. 根据身高重建队列
406. 根据身高重建队列 假设有打乱顺序的一群人站成一个队列，数组 people 表示队列中一些人的属性（不一定按顺序）。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi ，前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构…...
网站建设响应式是什么意思/网站seo关键词优化排名
如果在爱和技术之间选其一，我更愿意爱而非技术。爱是天性，智力是器用，器用不能取代天性。不欲得到和拥有，只是宁静地与之相处。 那曾使人欢乐的，是使人现在所悲伤；而今天的悲伤，复又成将来的欢乐…...
wordpress删除自定义分类/产品网站推广
小编作为一个上班族，每天会涉及到很多的图片文件，日积月累图片文件的整理和保存是一个任务艰巨的工作。那么如何更好的管理这些图片文件呢？小编有个好方法就是将有关系的某些图片文件全部整理到一个PDF文件内，这样一个类别的PDF包…...
网站建设公司 电话销售没什么效果/网站的营销推广方案
$(window).scroll(function() { }); window的滚动事件不触发以及offset().top数据乱的原因？ 如果你的css中：html,body的高度样式如果设置为100%，那么$(window).scroll方法将检测不到正确的滚出高度（0），导致…...
如何制作公司内部网页/公司网站seo外包
本文以内部函数为主线，深入讲解内部函数和闭包的应用场景和原理，学会后你的Python水平会再上一个台阶，对工作面试或实战应用都会很有帮助。本文包括：函数是一等公民内部函数定义闭包和nonlocal关键词应用场景 - 封装应用场景 - 函…...
合肥企业网站建设哪个好/电商从零基础怎么学
数据分析疫情图jquery做时间绘图前言 好好学习，javaweb制作全国疫情展示,以下是今天学习的知识，今天学了jquery制作时间导入到HTML中，和用echarts绘制图形，官网：[https://echarts.apache.org/zh/index.html] 第一天&am…...
银川网站推广/seo狂人
我们经常需要写代码，查看代码，查看代码时一般会用记事本，但是记事本的功能太弱，而写代码时有的编译器大的编辑功能太弱，像IAR keil之类的，因此需要一个小巧好用的替代记事本的编辑软件。Notepad我用了很久了…...