前端学习-获取DOM对象（二十一）
目录
前言
目标
提问
学习路径
根据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获取一个元素 …...
PCL点云库入门——PCL库中Eigen数学工具库的基本使用（持续更新）
0、前言 PCL点云库中的算法都基于Eigen数学工具库来实现的，因此，掌握Eigen库对于深入理解和应用PCL点云库至关重要。Eigen库不仅提供了高效的矩阵和向量运算，还支持复杂的线性代数、几何变换等操作，为PCL点云处理提供了强大的数学…...
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 globally 3. Toggle inlay hints globallyReferences https://www.jetbrains.com/help/clio…...
2025山东科技大学考研专业课复习资料一览
[冲刺]2025年山东科技大学020200应用经济学《814经济学之西方经济学[宏观部分]》考研学霸狂刷870题[简答论述计算题]1小时前[强化]2025年山东科技大学085600材料与化工《817物理化学》考研强化检测5套卷22小时前[冲刺]2025年山东科技大学030100法学《704综合一[法理学、国际法学…...
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 …...
东方通TongWeb7.0.4.9M4部署SuperMap iServer 11.2.1
一、软件版本 操作系统: CentOS Linux release 7.5.1804 (Core)JDK:11.0.18东方通：TongWeb7.0.4.9M4SuperMap iServer：11.2.1 JDK和TongWeb软件分享： 链接: https://pan.baidu.com/s/1HGDTPnPID0PEOMbg3FjTVQ?pwdbh8v 提取码: bh8v 东方通软…...
QT绘制同心扇形
void ChartForm::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 设置抗锯齿painter.save();// 设置无边框（不需要设置QPen，因为默认是不绘制边框的）QPen pen(Qt::NoPen);// QPen pen…...
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 的内…...
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}; // 否则…...
【苍穹外卖】学习心得体会-随笔
前言 写了很久，终于可以完整运行项目了，记录下这几天的心得体会回顾一下知识点 第一天、Git 分布式版本控制工具 一、Git概述 定义：是分布式版本控制工具，用于管理软件开发中的源代码文件，像Java类、xml文件、html…...
MySQL学习之表的增删改
MySQL学习之表的增删改 语法总结： INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); //指定字段添加数据 INSERT INTO 表名 VALUES (值1, 值2, ...); //给全部字段添加数据 INSERT INTO 表名 VALUES (值1, 值2, ...), (值1, 值2, ...), (值1, …...
电脑excel词典(xllex.dll)文件丢失是或损坏是什么原因?“xllex.dll文件缺失“要怎么解决？
Excel词典（xllex.dll）文件丢失或损坏？别担心，这里有解决之道！ 在日常的电脑使用和办公软件操作中，我们偶尔会碰到一些让人头疼的问题，比如Excel突然提示“Excel词典（xllex.dll&…...
【CSS in Depth 2 精译_084】第 14 章：CSS 蒙版、形状与剪切概述 + 14.1：CSS 滤镜
当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 ✔️ 14.1.1 滤镜的类型 ✔️14.1.2 背景滤镜 ✔️ 14.2 蒙版 文章目录 第 14 章 蒙版、形状与剪切 Masks, shapes, and…...
gorm源码解析（四）：事务，预编译
文章目录 前言事务自己控制事务用 Transaction方法包装事务 预编译事务结合预编译总结 前言 前几篇文章介绍gorm的整体设计，增删改查的具体实现流程。本文将聚焦与事务和预编译部分 事务 自己控制事务 用gorm框架，可以自己控制事务的Begin࿰…...
前端优雅（装逼）写法（updating····）
1.>>右位移运算符取整数 它将一个数字的二进制位向右移动指定的位数，并在左侧填充符号位（即负数用1填充，正数用0填充）。 比如 2.99934 >> 0：取整结果是2，此处取整并非四舍五入 2.99934 会先…...
黑马Java面试教程_P7_常见集合_P4_HashMap
系列博客目录 文章目录 系列博客目录4. HashMap相关面试题4.4 面试题-HashMap的put方法的具体流程 频54.4.1 hashMap常见属性4.4.2 源码分析 HashMap的构造函数面试文稿： 4.5 讲一讲HashMap的扩容机制 难3频4面试文稿： 4.6 面试题-hashMap的寻址算法 难4…...
使用 CFD 加强水资源管理：全面概述
探索 CFD（计算流体动力学）在增强保护人类健康的土木和水利工程实践方面的重大贡献。 挑战 水资源管理是指规划、开发、分配和管理水资源最佳利用的做法。它包括广泛的活动，旨在确保水得到有效和可持续的利用，以满足各种需求&…...
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…...
R语言读取hallmarks的gmt文档的不同姿势整理
不同格式各有所用 1.读取数据框格式的 hallmarks <- clusterProfiler::read.gmt("~/genelist/h.all.v7.4.symbols.gmt") #返回的是表格 hallmarks$term<- gsub(HALLMARK_,"",hallmarks$term)适配Y叔的clusterProfiler的后续分析，比如整理后geneli…...
【Nginx-4】Nginx负载均衡策略详解
在现代Web应用中，随着用户访问量的增加，单台服务器往往难以承受巨大的流量压力。为了解决这一问题，负载均衡技术应运而生。Nginx作为一款高性能的Web服务器和反向代理服务器，提供了多种负载均衡策略，能够有效地将请求分…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...