前端学习-获取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服务器和反向代理服务器，提供了多种负载均衡策略，能够有效地将请求分…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
MySQL 主从同步异常处理
阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示ÿ…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...