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

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

news 2025/9/12 10:35:50

目录

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/11 16:48:25

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/9/11 8:42:09

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/9/6 18:01:23

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/8/24 17:18:40

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/8/25 11:07:48

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/1 23:34:37

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/9/7 8:46:40

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/9/9 10:06:46