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

JavaScript querySelector()、querySelectorAll() CSS选择器解析(DOM元素选择)

文章目录

  • 基于querySelector系列方法的CSS选择器深度解析
    • 一、方法概述
    • 二、基础选择器类型
      • 1. 类型选择器
      • 2. ID选择器
      • 3. 类选择器
      • 4. 属性选择器
    • 三、组合选择器
      • 1. 后代组合器
      • 2. 子元素组合器
      • 3. 相邻兄弟组合器
      • 4. 通用兄弟组合器
    • 四、伪类与伪元素
      • 1. 结构伪类
      • 2. 状态伪类
      • 3. 内容伪类
      • 4. 伪元素
    • 五、高级选择技巧
      • 1. 多重选择
      • 2. 转义特殊字符
      • 3. 动态选择器拼接
    • 六、DOM操作实践示例
      • 1. 动态样式修改
      • 2. 批量元素操作
      • 3. 表单验证增强
    • 七、性能注意事项
    • 八、浏览器支持情况

基于querySelector系列方法的CSS选择器深度解析

一、方法概述

const element = document.querySelector(selector);
const elements = document.querySelectorAll(selector);
  • querySelector()返回匹配的第一个元素
  • querySelectorAll()返回NodeList集合
  • 参数接受标准CSS选择器语法
  • 支持在任意Element节点上调用

二、基础选择器类型

1. 类型选择器

document.querySelector('div') // 匹配第一个<div>
document.querySelectorAll('p') // 所有<p>元素

2. ID选择器

document.querySelector('#main-header') // ID需唯一
document.querySelector('div#content') // 带标签限制

3. 类选择器

document.querySelectorAll('.active') // 所有含active类的元素
document.querySelector('button.primary') // 带标签限制

4. 属性选择器

/* 完整匹配 */
[type="submit"]/* 包含匹配 */
[class*="btn"]/* 开头匹配 */
[href^="https"]/* 结尾匹配 */
[src$=".png"]/* 空格分隔包含 */
[lang~="en"]

示例:

document.querySelector('a[target="_blank"]') // 新窗口打开的链接
document.querySelectorAll('input[type^="date"]') // 日期相关输入框

三、组合选择器

1. 后代组合器

document.querySelectorAll('nav ul li') // 所有nav下的ul中的li

2. 子元素组合器

document.querySelector('div > .content') // 直接子元素

3. 相邻兄弟组合器

document.querySelector('h2 + p') // 紧接在h2后的p元素

4. 通用兄弟组合器

document.querySelectorAll('h3 ~ div') // h3之后的所有同级div

四、伪类与伪元素

1. 结构伪类

document.querySelector('li:nth-child(2n+1)') // 奇数行列表项
document.querySelectorAll('tr:nth-of-type(even)') // 偶数行表格行

2. 状态伪类

document.querySelector('input:disabled') // 禁用输入框
document.querySelectorAll('a:visited') // 已访问链接

3. 内容伪类

document.querySelector('p:empty') // 无内容的段落
document.querySelector('div:has(> img)') // 包含直接子图片的div

4. 伪元素

document.querySelector('p::first-line') // 无效选择,伪元素不可匹配

五、高级选择技巧

1. 多重选择

document.querySelectorAll('h1, h2, h3') // 所有标题元素

2. 转义特殊字符

document.querySelector('#user\\.name') // 转义特殊字符

3. 动态选择器拼接

const type = 'success';
document.querySelector(`.alert-${type}`) // 模板字符串拼接

六、DOM操作实践示例

1. 动态样式修改

document.querySelector('.chart-bar:nth-child(3)').style.backgroundColor = '#ff4757';

2. 批量元素操作

document.querySelectorAll('.data-table tr:not(:first-child)').forEach(row => {row.classList.add('highlight');});

3. 表单验证增强

document.querySelectorAll('input:invalid').forEach(input => {input.parentElement.classList.add('error');
});

七、性能注意事项

  1. 选择器复杂度控制:避免超过三层嵌套
  2. 作用域优化:优先在最近父元素查询
  3. 缓存结果:重复使用查询结果
  4. 伪实时性:NodeList不会自动更新
  5. 特殊字符处理:需正确转义CSS保留字符

八、浏览器支持情况

选择器类型支持版本
:focus-withinChrome 64+
:has()Chrome 105+
:is()Chrome 88+
:where()Chrome 88+

通过合理运用CSS选择器语法,可以实现精确的DOM元素定位。建议优先使用简单选择器组合,在复杂场景下可结合现代CSS伪类保持代码可维护性。

相关文章:

JavaScript querySelector()、querySelectorAll() CSS选择器解析(DOM元素选择)

文章目录 基于querySelector系列方法的CSS选择器深度解析一、方法概述二、基础选择器类型1. 类型选择器2. ID选择器3. 类选择器4. 属性选择器 三、组合选择器1. 后代组合器2. 子元素组合器3. 相邻兄弟组合器4. 通用兄弟组合器 四、伪类与伪元素1. 结构伪类2. 状态伪类3. 内容伪…...

Linux系统中处理子进程的终止问题

1. 理解子进程终止的机制 在Unix/Linux系统中&#xff0c;当子进程终止时&#xff0c;会向父进程发送一个SIGCHLD信号。父进程需要捕捉这个信号&#xff0c;并通过调用wait()或waitpid()等函数来回收子进程的资源。这一过程被称为“回收僵尸进程”。 如果父进程没有及时调用w…...

Docker 不再难懂:快速掌握容器命令与架构原理

1. Docker 是容器技术的一种 容器&#xff08;Container&#xff09;概述 容器&#xff08;Container&#xff09;是一种轻量级的虚拟化技术&#xff0c;它将应用程序及其所有依赖环境打包在一个独立的、可移植的运行时环境中。容器通过操作系统级的虚拟化提供隔离&#xff0…...

取消票证会把指定的票证从数据库中删除,同时也会把票证和航班 等相关表中的关联关系一起删除。但在删除之前,它会先检查当前用户是否拥有这张票

在做航班智能客服问答系统时会遇到取消票证的场景&#xff0c;这里涉及数据库的操作时会把指定的票证从数据库中删除&#xff0c;同时也会把票证和航班等相关表中的关联关系一起删除。但在删除之前&#xff0c;需要先检查当前用户是否拥有这张票&#xff0c;只有票主才有权限取…...

力扣-贪心-763 划分字母区间

思路 先统计字符串中每一个字母出现的最后下标&#xff0c;然后从end初始化为第一个字母出现的最后下标&#xff0c;在i<end时&#xff0c;不断更新end&#xff0c;因为一旦囊括新的字母就最起码要遍历到新字母出现的最后下标&#xff0c;在i>end时&#xff0c;说明遍历…...

【Redis 原理】网络模型

文章目录 用户空间 && 内核空间阻塞IO非阻塞IO信号驱动IO异步IOIO多路复用selectpollepoll Web服务流程Redis 网络模型Redis单线程网络模型的整个流程Redis多线程网络模型的整个流程 用户空间 && 内核空间 为了避免用户应用导致冲突甚至内核崩溃&#xff0c;用…...

cpp中的继承

一、继承概念 在cpp中&#xff0c;封装、继承、多态是面向对象的三大特性。这里的继承就是允许已经存在的类&#xff08;也就是基类&#xff09;的基础上创建新类&#xff08;派生类或者子类&#xff09;&#xff0c;从而实现代码的复用。 如上图所示&#xff0c;Person是基类&…...

DeepSeek全栈接入指南:从零到生产环境的深度实践

第一章:DeepSeek技术体系全景解析 1.1 认知DeepSeek技术生态 DeepSeek作为新一代人工智能技术平台,构建了覆盖算法开发、模型训练、服务部署的全链路技术栈。其核心能力体现在: 1.1.1 多模态智能引擎 自然语言处理:支持文本生成(NLG)、语义理解(NLU)、情感分析等计算…...

CSS 真的会阻塞文档解析吗?

在网页开发领域&#xff0c;一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题&#xff0c;需要从浏览器渲染网页的原理说起。 浏览器渲染网页的基本流程 浏览器在接收到 HTML 文档后&#xff0c;会依次进行…...

大模型的UI自动化:Cline 使用Playwright MCP Server完成测试

大模型的UI自动化:Cline 使用Playwright MCP Server完成测试 MCP MCP(Model Context Protocol),是一个开发的协议,标准化了应用程序如何为大模型提供上下文。MCP提供了一个标准的为LLM提供数据、工具的方式,使用MCP会更容易的构建Agent或者是基于LLM的复杂工作流。 最近…...

碰撞检测 | 图解凸多边形分离轴定理(附ROS C++可视化)

目录 0 专栏介绍1 凸多边形碰撞检测2 多边形判凸算法3 分离轴定理(SAT)4 算法仿真与可视化4.1 核心算法4.2 仿真实验 0 专栏介绍 &#x1f525;课设、毕设、创新竞赛必备&#xff01;&#x1f525;本专栏涉及更高阶的运动规划算法轨迹优化实战&#xff0c;包括&#xff1a;曲线…...

Python 基本数据类型

目录 1. 字符串&#xff08;String&#xff09; 2. 列表&#xff08;List&#xff09; 3. 字典&#xff08;Dictionary&#xff09; 4. 集合&#xff08;Set&#xff09; 5. 数字&#xff08;Number&#xff09; 6. 布尔值&#xff08;Boolean&#xff09; 1. 字符串&…...

突破“第一崇拜“:五维心理重构之路

一、视频介绍 在这个崇尚"第一"的时代&#xff0c;我们如何找到自己的独特价值&#xff1f;本视频将带您踏上五维心理重构之旅&#xff0c;从诗意人生的角度探讨如何突破"圣人之下皆蝼蚁"的局限。我们将穿越人生的不同阶段&#xff0c;从青春的意气风发到…...

KubeKey一键安装部署k8s集群和KubeSphere详细教程

目录 一、KubeKey简介 二、k8s集群KubeSphere安装 集群规划 硬件要求 Kubernetes支持版本 操作系统要求 SSH免密登录 配置集群时钟 所有节点安装依赖 安装docker DNS要求 存储要求 下载 KubeKey 验证KubeKey 配置集群文件 安装集群 验证命令 登录页面 一、Ku…...

UE5网络通信架构解析

文章目录 前言一、客户端-服务器架构&#xff08;C/S Model&#xff09;二、对等网络架构&#xff08;P2P&#xff0c;非原生支持&#xff09;三、混合架构&#xff08;自定义扩展&#xff09;四、UE5网络核心机制 前言 UE5的网络通信主要基于客户端-服务器&#xff08;C/S&am…...

实验3 知识表示与推理

实验3 知识表示与推理 一、实验目的 &#xff08;1&#xff09;掌握知识和知识表示的基本概念&#xff0c;理解其在AI中的深刻含义与意义&#xff1b; &#xff08;2&#xff09;熟悉AI中常用的知识表示方法的优缺点及其应用场景&#xff1b; &#xff08;3&#xff09;掌握产…...

基于Springboot银行信用卡额度管理系统【附源码】

基于Springboot银行信用卡额度管理系统 效果如下&#xff1a; 系统登陆页面 用户个人中心页面 新增信用卡申请页面 评估审核页面 管理员主页面 评估审核页面 操作日志管理页面 消费页面 研究背景 随着金融行业的快速发展和信息技术的不断进步&#xff0c;信用卡作为一种便捷…...

达梦数据库学习笔记@1

目录 达梦数据库学习笔记一、表空间管理&#xff08;一&#xff09;默认表空间&#xff08;二&#xff09;相关数据字典&#xff08;三&#xff09;表空间操作&#xff08;四&#xff09;临时表空间管理 二、重做日志管理&#xff08;一&#xff09;系统视图&#xff08;二&…...

图像处理篇---图像处理中常见参数

文章目录 前言一、分贝&#xff08;dB&#xff09;的原理1.公式 二、峰值信噪比&#xff08;PSNR, Peak Signal-to-Noise Ratio&#xff09;1.用途2.公式3.示例 三、信噪比&#xff08;SNR, Signal-to-Noise Ratio&#xff09;1.用途2.公式3.示例 四、动态范围&#xff08;Dyna…...

AI Agent实战:打造京东广告主的超级助手 | 京东零售技术实践

前言 自2022年末ChatGPT的问世&#xff0c;大语言模型&#xff08;LLM&#xff09;技术引发全球关注。在大模型技术落地的最佳实践中&#xff0c;智能体&#xff08;Agent&#xff09;架构显现出巨大潜力&#xff0c;成为业界的普遍共识&#xff0c;各大公司也纷纷启动Agent技…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...