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

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

news 2026/4/4 20:08:44

目录

一.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

BHVCC AI人工智能大鼠八臂视频迷宫实验步骤 八臂迷宫刺激器

八臂迷宫是一种用于研究动物空间记忆的迷宫模型。它由一个中心区和其周围连接的八条臂组成&#xff0c;在其中一些臂的末端放入食饵或将一些臂施以电击&#xff0c;根据动物的取食或逃避策略&#xff08;进入每个臂的次数、时间、错能&#xff08;如动物活动路径、各种时间、次…...

编程新知 2026/4/4 18:54:23

猫抓Cat-Catch：5步掌握浏览器资源嗅探的终极指南

猫抓Cat-Catch&#xff1a;5步掌握浏览器资源嗅探的终极指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否经常在网页上看到喜欢的视频却无…...

编程新知 2026/4/4 18:52:23

实战指南：基于快马与腾讯云服务快速构建可商用直播互动网页

实战指南&#xff1a;基于快马与腾讯云服务快速构建可商用直播互动网页 最近在做一个直播互动网页项目&#xff0c;需要同时实现视频直播和即时聊天功能。经过一番摸索&#xff0c;发现用InsCode(快马)平台配合腾讯云服务可以快速搭建出可商用的解决方案。下面分享我的实战经验…...

编程新知 2026/4/4 18:32:11

如何处理Java LocalDateTime与Oracle TIMESTAMP WITH TIME ZONE的时区对应

根本原因是LocalDateTime无时区信息&#xff0c;JDBC驱动按JVM时区&#xff08;如Asia/Shanghai&#xff09;将其解释为带偏移时间点&#xff1b;存UTC时间须用localDateTime.atZone(ZoneOffset.UTC).toOffsetDateTime()显式指定偏移。Oracle插入时TIMESTAMP WITH TIME ZONE字段…...

编程新知 2026/4/4 18:23:57

c语言完美演绎6-20

/* 范例&#xff1a;6-20 */#include<stdio.h> #include<conio.h>int main(){int a;printf("请输入你的分数0-100>");scanf("%d",&a);if((a>0) && (a<60))printf("你被当了");else if((a>60) && (a…...

编程新知 2026/4/4 18:19:55

拯救者R7000P显卡驱动安装避坑指南：从黑屏到流畅运行VSlam

1. 为什么R7000P装显卡驱动容易黑屏&#xff1f; 很多朋友拿到拯救者R7000P笔记本后&#xff0c;第一件事就是安装Ubuntu系统来跑VSlam开发环境。但往往在安装NVIDIA显卡驱动时&#xff0c;会遇到让人头疼的黑屏问题。我自己就经历过不下5次黑屏&#xff0c;最严重的一次甚至需…...

编程新知 2026/4/4 17:23:31

STM32F103C8T6 GPIO驱动LED保姆级教程（附完整代码）

STM32F103C8T6 GPIO驱动LED实战指南&#xff1a;从寄存器操作到HAL库封装 开篇&#xff1a;为什么选择STM32作为嵌入式开发入门 在众多微控制器中&#xff0c;STM32系列因其完善的生态和丰富的资源成为工程师的首选。特别是STM32F103C8T6这款被爱好者称为"蓝色药丸"的…...

编程新知 2026/4/4 17:21:14

OpCore-Simplify：让黑苹果配置从3天缩短到15分钟的智能助手

OpCore-Simplify&#xff1a;让黑苹果配置从3天缩短到15分钟的智能助手 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否曾因为复杂的黑苹果配置…...

编程新知 2026/4/4 16:42:45

Qwen3.5-9B基础教程：start.sh脚本解析+环境变量注入+PATH调试技巧

Qwen3.5-9B基础教程&#xff1a;start.sh脚本解析环境变量注入PATH调试技巧 1. 项目概述 Qwen3.5-9B是一个拥有90亿参数的开源大语言模型&#xff0c;具备强大的逻辑推理、代码生成和多轮对话能力。该模型支持多模态理解&#xff08;图文输入&#xff09;和长上下文处理&…...

编程新知 2026/4/4 16:24:25

Omni-Vision Sanctuary 数据库集成指南：MySQL配置与视觉数据存储方案

Omni-Vision Sanctuary 数据库集成指南&#xff1a;MySQL配置与视觉数据存储方案 1. 前言&#xff1a;为什么需要数据库集成 视觉识别应用每天会产生大量数据&#xff0c;如果没有合适的存储方案&#xff0c;这些宝贵的数据很容易丢失或难以管理。MySQL作为最流行的关系型数据…...

编程新知 2026/4/4 16:24:25