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

前端学习-获取DOM对象（二十一）

news 2026/4/3 11:53:05

目录

前言

目标

提问

学习路径

根据CSS选择器来获取DOM元素

其他获取DOM元素的方法

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

语法

示例

参数

返回值

选择匹配的多个元素语法

参数

字符串返回值

示例

补充

其它获取DOM元素方法

根据id获取一个元素

根据 标签获取一类元素 获取页面 所有div

根据 类名获取元素 获取页面 所有类名为 w的

总结

前言

雄关漫道真如铁，而今迈步从头越

目标

能获取/查找DOM对象

提问

我们想要操作某个标签首先做什么？

  肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作

  查找元素DOM元素就是利用 js 选择页面中标签元素

学习路径

根据CSS选择器来获取DOM元素

其他获取DOM元素的方法

根据CSS选择器来获取DOM元素

选择匹配的第一个元素

语法

document.querySelector('css选择器');

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box {​ width: 100px;​ height: 100px;}</style><body><div class="box"></div><script>​ //获取匹配的第一个元素​ const box = document.querySelector('div');​ console.dir(box);​ console.log(box);</script></body></html>

参数

包含一个或多个有效的CSS选择器 字符串

返回值

CSS选择器匹配的第一个元素，一个HTMLElement对象

选择匹配的多个元素语法

:document.querySelectorAll('css选择器')

参数

包含一个或多个有效的CSS选择器

字符串返回值

CSS选择器匹配的NodeList 对象集合document.queryselectorAll('ul li')

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.box {​ width: 100px;​ height: 100px;}</style><body><div class="box"></div><ul>​ <li>1</li>​ <li>2</li>​ <li>3</li></ul></ul><script>​ const box = document.querySelectorAll('ul li');​ console.dir(box);​ console.log(box);</script></body></html>

补充

document.querySelectorAll('css选择器')得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象，则需要遍历(for)的方式获得。

注意事项哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

其它获取DOM元素方法

根据id获取一个元素

document.getElementById('nav')

根据 标签获取一类元素 获取页面 所有div

document.getElementsByTagName('div')

根据 类名获取元素 获取页面 所有类名为 w的

document.getElementsByClassName('w')

总结

我很久以前很喜欢的一个人告诉我她恋爱了，我却只能恭喜恭喜

相关文章：

前端学习-获取DOM对象（二十一）

目录 前言 目标 提问 学习路径 根据CSS选择器来获取DOM元素 其他获取DOM元素的方法 根据CSS选择器来获取DOM元素 选择匹配的第一个元素 语法 示例 参数 返回值 选择匹配的多个元素语法 参数 字符串返回值 示例 补充 其它获取DOM元素方法 根据id获取一个元素 …...

编程日记 2024/12/19 12:38:37

PCL点云库入门——PCL库中Eigen数学工具库的基本使用（持续更新）

0、前言 PCL点云库中的算法都基于Eigen数学工具库来实现的&#xff0c;因此&#xff0c;掌握Eigen库对于深入理解和应用PCL点云库至关重要。Eigen库不仅提供了高效的矩阵和向量运算&#xff0c;还支持复杂的线性代数、几何变换等操作&#xff0c;为PCL点云处理提供了强大的数学…...

编程日记 2024/12/19 12:37:36

CLion Inlay Hints - 取消 CLion 灰色的参数和类型提示

CLion Inlay Hints - 取消 CLion 灰色的参数和类型提示 1. Parameter hints for C/C1.1. Toggle parameter hints globally 2. Type hints for C/C2.1. Toggle type hints&#xfeff; globally 3. Toggle inlay hints globallyReferences https://www.jetbrains.com/help/clio…...

编程日记 2024/12/19 12:35:34

2025山东科技大学考研专业课复习资料一览

[冲刺]2025年山东科技大学020200应用经济学《814经济学之西方经济学[宏观部分]》考研学霸狂刷870题[简答论述计算题]1小时前[强化]2025年山东科技大学085600材料与化工《817物理化学》考研强化检测5套卷22小时前[冲刺]2025年山东科技大学030100法学《704综合一[法理学、国际法学…...

编程日记 2024/12/19 12:34:33

vue3 v-model实例之二，tab标签页的实现

<template><div><Tab v-model"activeTab" :list"tabs" /><div><p>当前激活的 Tab 索引: {{ activeTab }}</p></div></div> </template><script setup> import { ref } from vue; import Tab …...

编程日记 2024/12/19 12:31:30

东方通TongWeb7.0.4.9M4部署SuperMap iServer 11.2.1

一、软件版本 操作系统: CentOS Linux release 7.5.1804 (Core)JDK:11.0.18东方通&#xff1a;TongWeb7.0.4.9M4SuperMap iServer&#xff1a;11.2.1 JDK和TongWeb软件分享&#xff1a; 链接: https://pan.baidu.com/s/1HGDTPnPID0PEOMbg3FjTVQ?pwdbh8v 提取码: bh8v 东方通软…...

编程日记 2024/12/19 12:27:26

QT绘制同心扇形

void ChartForm::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 设置抗锯齿painter.save();// 设置无边框&#xff08;不需要设置QPen&#xff0c;因为默认是不绘制边框的&#xff09;QPen pen(Qt::NoPen);// QPen pen…...

编程日记 2024/12/19 12:24:23

2012年西部数学奥林匹克试题(几何)

2012/G1 △ A B C \triangle ABC △ABC 内有一点 P P P, P P P 在 A B AB AB, A C AC AC 上的投影分别为 E E E, F F F, 射线 B P BP BP, C P CP CP 分别交 △ A B C \triangle ABC △ABC 的外接圆于点 M M M, N N N. r r r 为 △ A B C \triangle ABC △ABC 的内…...

编程日记 2024/12/19 12:20:20

8位移位寄存器的verilog语言

module shift_register (output reg [7:0] Q, // 8位移位寄存器输出input D, // 输入数据input rst, // 复位信号input clk // 时钟信号 );always (posedge clk) beginif (!rst)Q < 8b00000000; // 复位时将Q清零elseQ < {Q[6:0], D}; // 否则…...

编程日记 2024/12/19 12:14:13

【苍穹外卖】学习心得体会-随笔

前言 写了很久&#xff0c;终于可以完整运行项目了&#xff0c;记录下这几天的心得体会回顾一下知识点 第一天、Git 分布式版本控制工具 一、Git概述 定义&#xff1a;是分布式版本控制工具&#xff0c;用于管理软件开发中的源代码文件&#xff0c;像Java类、xml文件、html…...

编程日记 2024/12/19 12:10:09

MySQL学习之表的增删改

MySQL学习之表的增删改 语法总结&#xff1a; INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); //指定字段添加数据 INSERT INTO 表名 VALUES (值1, 值2, ...); //给全部字段添加数据 INSERT INTO 表名 VALUES (值1, 值2, ...), (值1, 值2, ...), (值1, …...

编程日记 2024/12/19 12:06:05

电脑excel词典(xllex.dll)文件丢失是或损坏是什么原因?“xllex.dll文件缺失“要怎么解决？

Excel词典&#xff08;xllex.dll&#xff09;文件丢失或损坏&#xff1f;别担心&#xff0c;这里有解决之道&#xff01; 在日常的电脑使用和办公软件操作中&#xff0c;我们偶尔会碰到一些让人头疼的问题&#xff0c;比如Excel突然提示“Excel词典&#xff08;xllex.dll&…...

编程日记 2024/12/19 12:03:03

【CSS in Depth 2 精译_084】第 14 章：CSS 蒙版、形状与剪切概述 + 14.1：CSS 滤镜

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 ✔️ 14.1.1 滤镜的类型 ✔️14.1.2 背景滤镜 ✔️ 14.2 蒙版 文章目录 第 14 章 蒙版、形状与剪切 Masks, shapes, and…...

编程日记 2024/12/19 12:00:00

gorm源码解析（四）：事务，预编译

文章目录 前言事务自己控制事务用 Transaction方法包装事务 预编译事务结合预编译总结 前言 前几篇文章介绍gorm的整体设计&#xff0c;增删改查的具体实现流程。本文将聚焦与事务和预编译部分 事务 自己控制事务 用gorm框架&#xff0c;可以自己控制事务的Begin&#xff0…...

编程日记 2024/12/19 11:58:59

前端优雅（装逼）写法（updating····）

1.>>右位移运算符取整数 它将一个数字的二进制位向右移动指定的位数&#xff0c;并在左侧填充符号位&#xff08;即负数用1填充&#xff0c;正数用0填充&#xff09;。 比如 2.99934 >> 0&#xff1a;取整结果是2&#xff0c;此处取整并非四舍五入 2.99934 会先…...

编程日记 2024/12/19 11:57:55

黑马Java面试教程_P7_常见集合_P4_HashMap

系列博客目录 文章目录 系列博客目录4. HashMap相关面试题4.4 面试题-HashMap的put方法的具体流程 频54.4.1 hashMap常见属性4.4.2 源码分析 HashMap的构造函数面试文稿&#xff1a; 4.5 讲一讲HashMap的扩容机制 难3频4面试文稿&#xff1a; 4.6 面试题-hashMap的寻址算法 难4…...

编程日记 2024/12/19 11:55:53

使用 CFD 加强水资源管理：全面概述

探索 CFD&#xff08;计算流体动力学&#xff09;在增强保护人类健康的土木和水利工程实践方面的重大贡献。 挑战 水资源管理是指规划、开发、分配和管理水资源最佳利用的做法。它包括广泛的活动&#xff0c;旨在确保水得到有效和可持续的利用&#xff0c;以满足各种需求&…...

编程日记 2024/12/19 11:51:46

XXE练习

pikachu-XXE靶场 1.POC:攻击测试 <?xml version"1.0"?> <!DOCTYPE foo [ <!ENTITY xxe "a">]> <foo>&xxe;</foo> 2.EXP:查看文件 <?xml version"1.0"?> <!DOCTYPE foo [ <!ENTITY xxe SY…...

编程日记 2024/12/19 11:50:45

R语言读取hallmarks的gmt文档的不同姿势整理

不同格式各有所用 1.读取数据框格式的 hallmarks <- clusterProfiler::read.gmt("~/genelist/h.all.v7.4.symbols.gmt") #返回的是表格 hallmarks$term<- gsub(HALLMARK_,"",hallmarks$term)适配Y叔的clusterProfiler的后续分析，比如整理后geneli…...

编程日记 2024/12/19 11:47:41

【Nginx-4】Nginx负载均衡策略详解

在现代Web应用中&#xff0c;随着用户访问量的增加&#xff0c;单台服务器往往难以承受巨大的流量压力。为了解决这一问题&#xff0c;负载均衡技术应运而生。Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;提供了多种负载均衡策略&#xff0c;能够有效地将请求分…...

编程日记 2024/12/19 11:43:36

3大核心问题解决：B站视频处理全流程指南从下载到去水印的实战方案

3大核心问题解决&#xff1a;B站视频处理全流程指南从下载到去水印的实战方案 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水…...

编程新知 2026/4/3 11:01:41

零门槛玩转ColabFold：蛋白质结构预测全攻略

零门槛玩转ColabFold&#xff1a;蛋白质结构预测全攻略 【免费下载链接】ColabFold Making Protein folding accessible to all! 项目地址: https://gitcode.com/gh_mirrors/co/ColabFold 如何用ColabFold打破计算资源壁垒&#xff1f; 一、价值定位&#xff1a;让蛋白…...

编程新知 2026/4/3 9:18:21

Git【企业级开发模型】

一、为什么需要企业级开发模型&#xff1f; 一个软件从零开始到最终交付&#xff0c;大致需要经历&#xff1a;规划 → 编码 → 构建 → 测试 → 发布 → 部署 → 维护。在个人项目中&#xff0c;你一个人可以完成所有环节。但在企业中&#xff0c;角色分工明确&#xff1a; 开…...

编程新知 2026/4/3 6:45:51

防晒霜真的防晒吗？揭秘SPF值背后的“光“标准

盛夏将至&#xff0c;防晒霜成为每个人的随身必备。你是否想过&#xff1a;瓶身上标注的 SPF 50、PA 是如何测出来的&#xff1f;为什么有些防晒霜涂了还是会晒黑&#xff1f;所谓的"防水防汗"真的有科学依据吗&#xff1f;这些问题的答案&#xff0c;都藏在一个精密…...

编程新知 2026/4/3 5:54:59

OpenClaw压力测试：Qwen3-14B在并发请求下的响应延迟分析

OpenClaw压力测试&#xff1a;Qwen3-14B在并发请求下的响应延迟分析 1. 测试背景与目标 上周在部署OpenClaw对接本地Qwen3-14B模型时&#xff0c;遇到一个实际问题&#xff1a;当我同时触发多个自动化任务时&#xff0c;系统响应明显变慢&#xff0c;甚至偶尔会出现任务失败。…...

编程新知 2026/4/3 4:51:56

跨平台办公自动化：OpenClaw+千问3.5-27B同步多端文件

跨平台办公自动化&#xff1a;OpenClaw千问3.5-27B同步多端文件 1. 为什么需要跨平台文件同步&#xff1f; 作为一个常年需要在Windows和Mac双系统切换的开发者&#xff0c;我经历过无数次这样的尴尬时刻&#xff1a;在Mac上修改的文档忘传到Windows&#xff0c;开会时找不到…...

编程新知 2026/4/3 4:35:41

终极指南：web3.py Gas价格策略如何优化以太坊交易成本

终极指南&#xff1a;web3.py Gas价格策略如何优化以太坊交易成本 【免费下载链接】web3.py A python interface for interacting with the Ethereum blockchain and ecosystem. 项目地址: https://gitcode.com/gh_mirrors/we/web3.py web3.py 作为以太坊区块链的 Pytho…...

编程新知 2026/4/3 4:13:22

如何实现 SEO 优化与广告投放的协同效果

如何实现 SEO 优化与广告投放的协同效果 在当今竞争激烈的互联网环境中&#xff0c;实现 SEO 优化与广告投放的协同效果已经成为提升网站流量和销售转化的关键。SEO&#xff08;搜索引擎优化&#xff09;和广告投放虽然各自有各自的目标和优势&#xff0c;但它们的结合能够带来…...

编程新知 2026/4/3 3:10:40

【仅限头部车企工控厂商内部流通】C++27静态反射安全合规包：覆盖MISRA C++:2023 Annex A.12及AUTOSAR C++14兼容性桥接层

第一章&#xff1a;C27 静态反射工业应用案例C27 将正式引入标准化的静态反射&#xff08;Static Reflection&#xff09;核心特性&#xff0c;基于 std::reflexpr 和反射元对象模型&#xff08;ROM&#xff09;&#xff0c;使编译期类型结构可被直接查询与遍历&#xff0c;无需…...

编程新知 2026/4/3 2:29:51

产品经理、设计师必看：2026年6款AI界面生成工具实测，哪个最值得用？

过去&#xff0c;一款移动应用从需求文档到可交付原型&#xff0c;至少需要设计师投入 1~2 周时间。而今&#xff0c;借助 AI 界面生成工具&#xff0c;同样的工作可以压缩到几小时甚至几十分钟完成。目前AI界面生成工具正在重塑产品团队的工作方式。本文实测对比了 UXbot、Uiz…...

编程新知 2026/4/2 23:59:58