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

javaScript:DOM元素的获取（静态/动态获取）

news 2026/2/4 15:52:28

目录

一.dom元素获取的意义与使用场景 

使用场景（绝大多数js操作都需要dom操作）

总结/疑问解答！ 

二.DOM元素获取的常用方法（重点）

获取dom元素（动态）

document.gerElementbyId()

document.gerElementsBytagName()

document.gerElementsByclassName()

document.gerElementsByname()通过name属性查找元素

获取dom元素（静态）

1.querySelector(css选择器) 新方法，ie低版本不支持，返回的是符合选择器的第一个元素对象

2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象

3.特点（重点）

4.注意

静态和动态的区别

相关代码

一.dom元素获取的意义与使用场景 

DOM 元素获取在 JavaScript 中具有重要的意义和作用。它使我们能够动态地与网页中的元素进行交互，并根据用户的操作或特定的逻辑来修改页面的外观和行为。

作用/意义（了解即可）

  1. 操作和修改元素内容：通过获取 DOM 元素，我们可以修改元素的文本内容、HTML 结构或其他属性。这使得我们可以根据需要动态地修改页面，例如更新文本、插入新的元素或更新图片等。
  2. 添加和删除元素：通过获取 DOM 元素及其父元素，我们可以动态地添加新的元素到页面中，或删除现有的元素。这对于创建动态内容、响应用户操作或实现交互性的网页非常有用。
  3. 修改元素样式：通过获取 DOM 元素的引用，我们可以修改元素的 CSS 样式，包括颜色、尺寸、位置等。这使得我们可以根据特定条件或用户操作来改变元素的外观，从而实现更好的用户体验或动态效果。
  4. 添加事件监听器：通过获取 DOM 元素，我们可以为元素添加事件监听器，以便在用户执行特定操作时触发相应的 JavaScript 代码。这使我们能够实现响应式的交互，并处理用户的点击、鼠标移动、键盘输入等事件

使用场景（绝大多数js操作都需要dom操作）

  • 动态网页：当需要根据用户的操作或特定的逻辑来动态更新网页内容或行为时，DOM 元素获取非常有用。例如，表单验证、菜单导航、动画效果等。
  • 单页应用程序（SPA）：在使用 JavaScript 框架（如React、Angular、Vue.js）开发单页应用程序时，通过获取 DOM 元素来操作和更新页面是必要的。例如，根据路由切换组件、更新数据、渲染视图等。
  • 动态表单验证：当需要验证表单输入的有效性，并基于验证结果提示用户时，通过获取 DOM 元素来检索表单字段，并应用相应的验证逻辑非常有用。
  • 注意DOM 元素获取是一项强大的功能，但在处理大量元素时可能会影响性能。因此，在使用过程中要注意使用正确的选择器，并避免不必要的DOM操作，以提高网页的性能和响应速度。

总结/疑问解答！ 

   dom操作其实在前面的文章中已经用到很多次了，但是一直没有系统性的总结，接下来的几篇文章，主要来总结dom操作以及dom操作相关的案例（小游戏），比如说：选字游戏，连连看，打地鼠，多球碰撞，随机抽签，无缝轮播，原生js绘制时钟等等。

二.DOM元素获取的常用方法（重点）

获取dom元素（动态）

获取dom元素

document.gerElementbyId()

document.gerElementsBytagName()

document.gerElementsByclassName()

document.gerElementsByname()通过name属性查找元素

ie下只针对于input元素起作用

在标准浏览器下，可以适用于任何标签

注意：gerElementsByname()的调用对象只能是 document

以上几种方法在前面的文章中都有讲到，所有在这里面不做过多的讲述，详情可以翻阅往期的笔记。下面是文章链接javaScript：如何获取html中的元素对象_js 获取html对象_小姚学前端的博客-CSDN博客

获取dom元素（静态）

1.querySelector(css选择器) 新方法，ie低版本不支持，返回的是符合选择器的第一个元素对象

 let age = document.querySelector('input[name="age"]')  //里面是属性选择器console.log(age);//通过id名获取let cao = document.querySelector('#cao')console.log(cao);

2.querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象

//获取所有的divlet divs = document.querySelectorAll('div')console.log(divs);//通过类名获取let qiao = document.querySelectorAll('.qiao')console.log(qiao);//同时使用多个选择器let ele = document.querySelectorAll('input,div')console.log(ele);//选择所有的li元素let lis = document.querySelectorAll('li')console.log(lis);//获取list1下面所有的li元素let lis1 = document.querySelectorAll('#list1>li')console.log(lis1);

3.特点（重点）

特点：

    1.传入的参数是选择器，通过选择器检索出具体元素

    2.他的调用对象只能是 document

    3.querySelector(css选择器) === querySelectorAll(css选择器)[0]

    4.都支持多个选择器，如果使用多个选择器, 用逗号分开

4.注意

以上两个方法是静态方法，所有选择器都支持   

静态和动态的区别

       动态获取的元素集合在以后的操作中随着操作的增删和修改而改变，静态获取的元素

集合，不会随着以后的操作而改变

   //静态和动态的区别let list1 =document.getElementById('list1')//创建一个li标签let cli = document.createElement('li')//使用标签名获取li标签，动态方法let myLi = document.getElementsByTagName('li')//使用静态方法获取li标签let ulSon = document.querySelectorAll('li')//给创建的标签添加字符串cli.innerHTML = '桃树';//把创建的标签添加到htmllist1.appendChild(cli);console.log(myLi,ulSon); //输出后的结果，动态的包含新创建的标签，静态的不包含

相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取dom元素</title>
</head>
<body><input type="text" name="user" placeholder="输入用户名" ><br><input type="text" name="age" placeholder="输入用户年龄" ><br><div name="user">不许玩原神</div><div class="qiao" id="cao">铜雀春深锁二乔</div><div class="qiao">小荷才露尖尖角</div><ul id="list1"><li>松树</li><li>杨树</li><li>梧桐树</li><li>石榴树</li><li>梨树</li></ul><ul id="list2"><li>松树2</li><li>杨树2</li><li>梧桐树2</li><li>石榴树2</li><li>梨树2</li></ul>
</body>
</html>
<script>/*获取dom元素document.gerElementbyId()document.gerElementsBytagName()document.gerElementsByclassName()document.gerElementsByname()通过name属性查找元素ie下只针对于input元素起作用在标准浏览器下，可以适用于任何标签注意：gerElementsByname()的调用对象只能是 document以上4个方法都是 动态方法querySelector(css选择器) 新方法，ie低版本不支持，返回的是符合选择器的第一个元素对象querySelectorAll(css选择器) 返回的是符合选择器的所有元素对象以上两个方法是静态方法，所有选择器都支持特点：1.传入的参数是选择器，通过选择器检索出具体元素2.他的调用对象只能是 document3.querySelector(css选择器) === querySelectorAll(css选择器)[0]4.都支持多个选择器，如果使用多个选择器, 用逗号分开静态和动态的区别动态获取的元素集合在以后的操作中随着操作的增删和修改而改变，静态获取的元素集合，不会随着以后的操作而改变*/let user = document.getElementsByName('user')console.log(user);let age = document.querySelector('input[name="age"]')  //里面是属性选择器console.log(age);let inputs = document.querySelector('input')console.log(inputs);//获取所有的divlet divs = document.querySelectorAll('div')console.log(divs);//通过类名获取let qiao = document.querySelectorAll('.qiao')console.log(qiao);//通过id名获取let cao = document.querySelector('#cao')console.log(cao);//同时使用多个选择器let ele = document.querySelectorAll('input,div')console.log(ele);//选择所有的li元素let lis = document.querySelectorAll('li')console.log(lis);//获取list1下面所有的li元素let lis1 = document.querySelectorAll('#list1>li')console.log(lis1);let myLi = document.getElementsByTagName('li')console.log(myLi);let ulSon = document.querySelectorAll('li')
//    ulSon[0].className='abc'myLi[0].className='abc'//静态和动态的区别let list1 =document.getElementById('list1')let cli = document.createElement('li')cli.innerHTML = '桃树';list1.appendChild(cli);console.log(myLi,ulSon);</script>

相关文章：

javaScript:DOM元素的获取（静态/动态获取）

目录 一.dom元素获取的意义与使用场景 使用场景&#xff08;绝大多数js操作都需要dom操作&#xff09; 总结/疑问解答&#xff01; 二.DOM元素获取的常用方法&#xff08;重点&#xff09; 获取dom元素&#xff08;动态&#xff09; document.gerElementbyId() docume…...

编程日记 2023/9/5 19:21:08

数据结构前言

一、什么是数据结构&#xff1f; 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。 上面是百度百科的定义&#xff0c;通俗的来讲数据结构就是数据元素集合与数据元素集合或者数据元素与数据元素之间的组成形式。 举个…...

编程日记 2023/9/5 19:20:07

Docker基于alpine带glibc的小型容器image

由于程序是C写的&#xff0c;gc编译&#xff0c;找了几个容器&#xff0c;生成比较小的是debianslim和ubuntu&#xff0c;生成后的大小分别为88MB&#xff0c;和91MB&#xff0c;还是太大了&#xff0c;于是想起一些小型容器如busybox或者alpine自己装glibc&#xff0c;但是试了…...

编程日记 2023/9/5 19:19:06

Nginx教程

Nginx教程 01-Nginx简介02-windows安装Nginx03-Nginx目录结构04-Linux安装Nginx05-linux下源码安装nginx06-linux下nginx配置07-在docker中安装nginx08-源码安装和yum安装的区别09-Nginx运行组和运行用户10-卸载nginx11-nginx的基本原理和架构12-nginx是如何处理请求的13-nginx…...

编程日记 2023/9/5 19:18:05

直播预约｜哪吒汽车岳文强：OEM和Tier1如何有效对接网络安全需求

信息安全是一个防护市场。如果数字化程度低&#xff0c;数据量不够&#xff0c;对外接口少&#xff0c;攻击成本高&#xff0c;所获利益少&#xff0c;自然就没有什么攻击&#xff0c;车厂因此也不需要在防护上花费太多成本。所以此前尽管说得热闹&#xff0c;但并没有太多真实…...

编程日记 2023/9/5 19:17:04

hiveserver2经常挂断的原因

hiveserver2经常挂断的原因 HiveServer2 经常挂断可能有多种原因&#xff0c;以下是一些可能导致挂断的常见原因&#xff1a; 资源不足&#xff1a;HiveServer2 需要足够的内存和 CPU 资源来处理查询请求。如果资源不足&#xff0c;可能会导致 HiveServer2 挂断。请确保在配置…...

编程日记 2023/9/5 19:16:03

openeuler 23.03 安装mysql 8.X

遇到一堆问题&#xff1a;直接从mysql官下载&#xff0c;都不行。下列是失败的&#xff1a; mysql80-community-release-el8-1.noarch.rpm mysql-8.0.34-1.el8.x86_64.rpm-bundle.tar mysql-8.1.0-1.el9.x86_64.rpm-bundle.tar 后来想从openeuler下载应该靠谱&#xff1a;ht…...

编程日记 2023/9/5 19:15:02

网络安全—0基础学习笔记（黑客）

一、前言 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多 google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答. 4.遇到实在搞不懂的,可以先放放,以后再来解决. …...

编程日记 2023/9/5 19:14:00

react HashRouter 与 BrowserRouter 的区别及使用场景

一、简介 在单页面应用中&#xff0c;如何在切换页面后&#xff0c;不刷新浏览器呢&#xff1f;为了解决这个问题&#xff0c;有两种方法&#xff0c;就是hash路由模式、history路由模式&#xff0c;而 react router 的两种路由就是使用这两种路由模式。 二、区别 HashRouter…...

编程日记 2023/9/5 19:12:59

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU硬件那些事（2.3）- 串行NOR Flash下载算法(J-Link工具篇)

https://www.cnblogs.com/henjay724/p/13770137.html 大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。今天痞子衡给大家介绍的是J-Link工具下i.MXRT的串行NOR Flash下载算法设计。 在i.MXRT硬件那些事系列之《在串行NOR Flash XIP调试原理》一文中&#xff0c;痞…...

编程日记 2023/9/5 19:11:58

多目标应用：基于多目标向日葵优化算法（MOSFO）的微电网多目标优化调度MATLAB

一、微网系统运行优化模型 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标向日葵优化算法 多目标向日葵优化算法&#xff08;Multi-objective sunflower optimization&#xff0c;MOS…...

编程日记 2023/9/5 19:10:57

智能安全科技，Vatee万腾为您服务

在智能科技的引领下&#xff0c;Vatee万腾将为您点亮投资之路&#xff0c;助您在金融市场中抓住机遇&#xff0c;实现财务目标。作为一家融合科技与投资的先锋平台&#xff0c;Vatee万腾致力于为投资者提供智能化的投资方案和支持。 Vatee万腾以其先进的智能科技为基础&#xf…...

编程日记 2023/9/5 19:09:55

Scala中的类型检查和转换，以及泛型，scala泛型的协变和逆变

Scala中的类型检查和转换&#xff0c;以及泛型 类型检查和转换 说明 &#xff08;1&#xff09; obj.isInstanceOf[T]&#xff1a;判断 obj 是不是T 类型。 &#xff08;2&#xff09; obj.asInstanceOf[T]&#xff1a;将 obj 强转成 T 类型。 &#xff08;3&#xff09; cla…...

编程日记 2023/9/5 19:08:54

【数据结构】C语言队列(详解)

前言: &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:http://t.csdn.cn/oXkBa ⛳⛳本篇内容:c语言数据结构--C语言实现队列 目录 一.队列概念及结构 1.1队列的概念 1.2队列的结构 二.队列的实现 2.1头文…...

编程日记 2023/9/5 19:07:53

【数据结构初阶】一. 复杂度讲解

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 学C的第三十四天【程序环境和预处理】_高高的胖子的博客-CSDN博客 1 . 算法效率 &#xff08;1&#xff09;. 什么是数据结构&#xff1a; 数据结构(Data Structure)是计算机存储、…...

编程日记 2023/9/5 19:06:53

Jmete+Grafana+Prometheus+Influxdb+Nginx+Docker架构搭建压测体系/监控体系/实时压测数据展示平台+遇到问题总结

背景 需要大批量压测时&#xff0c;单机发出的压力能力有限&#xff0c;需要多台jmeter来同时进行压测&#xff1b;发压机资源不够&#xff0c;被压测系统没到瓶颈之前&#xff0c;发压机难免先发生资源不足的情形&#xff1b;反复压测时候也需要在不同机器中启动压测脚本&…...

编程日记 2023/9/5 19:05:52

php提交表单将html相互字符转化的封装函数

在 PHP 中&#xff0c;您可以使用 htmlspecialchars() 函数将 HTML 字符转换为文本。该函数将把 <、>、" 和 等特殊字符转换为对应的 HTML 实体&#xff0c;从而避免跨站点脚本&#xff08;XSS&#xff09;攻击。 例如&#xff0c;如果您有一个表单输入字段的值&a…...

编程日记 2023/9/5 19:04:51

7 Series FPGAs GTX/GTH Transceivers

目录 1. Overview2. Block Diagram3. Transmitter4. Receiver5. Physical Coding Sublayer（PCS）6. Physical Medium Attachment（PMA）本博客为Xilinx 7系列FPGA的千兆比特高速收发器（Gigabit Transceiver, GT）介绍 ug476 - 7 Series FPGAs GTX GTH TransceiversUser Guide…...

编程日记 2023/9/5 19:03:49

iOS系统下轻松构建自动化数据收集流程

在当今信息爆炸的时代&#xff0c;我们经常需要从各种渠道获取大量的数据。然而&#xff0c;手动收集这些数据不仅耗费时间和精力&#xff0c;还容易出错。幸运的是&#xff0c;在现代科技发展中有两个强大工具可以帮助我们解决这一问题——Python编程语言和iOS设备上预装的Sho…...

编程日记 2023/9/5 19:02:48

Android基础之Activity生命周期

Activity是Android四大组件之一、称为之首也恰如其分。 Activity直接翻译为中文叫活动。在Android系统中Activity就是我看到的一个完整的界面。 界面中看到的TextView(文字&#xff09;、Button(按钮)、ImageView&#xff08;图片&#xff09;都是需要Activity来承载的。 总…...

编程日记 2023/9/5 19:01:47

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/2 13:07:39

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/1/31 7:06:47

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/1/20 23:32:51

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/1/22 11:16:26

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59