【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )

文章目录

  • 一、querySelector 函数
    • 1、querySelector 函数简介
    • 2、完整代码示例
  • 二、querySelectorAll 函数
    • 1、querySelectorAll 函数简介
    • 2、完整代码示例
  • 三、NodeList 对象
    • 1、NodeList 对象简介
    • 2、完整代码示例


本博客相关参考文档 :

  • WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API
  • getElementById 函数参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById
  • Element 对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Element
  • getElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName
  • HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
  • getElementsByClassName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName
  • querySelector 函数文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  • 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
  • querySelectorAll 函数 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
  • NodeList 对象 : https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

在之前的博客中 , 都是通过 ID、 标签名、类名 获取 HTML 网页中的 DOM 元素 , 分别使用

  • getElementById 函数
  • getElementsByTagName 函数
  • getElementsByClassName 函数

上述获取 DOM 元素的函数 , 需要根据不同的 CSS 选择器 , 使用不同的函数 ;





一、querySelector 函数



1、querySelector 函数简介


在 HTML5 中 , DOM API 推出了新的方法 querySelector 函数 , 可以在该函数参数中指定 " CSS 选择器 " , 函数返回匹配该选择器的第一个 DOM 元素 , 如果没有与之匹配的元素 , 返回 null 值 ;

Document 和 Element 都定义了 querySelector 函数 , 分别从 HTML 文档 和 Element 元素 中查询 指定 符合 CSS 选择器 的 第一个 DOM 元素 , 只能获取一个 Element 元素 ;


document.querySelector 函数原型如下 :

var element = document.querySelector(selectors);
  • selectors 参数 : 若干 有效的 CSS 选择器字符串 , 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ;
  • 返回值 : 返回 符合 CSS 选择器的 第一个 DOM 元素 , 类型是 Element 对象 ;

CSS 选择器参考 :

  • 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
  • querySelector 函数文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

给定如下 HTML 标签 :

    <div id="hello">Hello1</div><div>Hello</div><div class="text">Hello</div><div id="nav"><div class="text">Hello2</div><div>Hello2</div><div>Hello2</div></div>

使用 ID 选择器 #hello 可以获取 ID 为 hello 的 DOM 元素 ;

// 只获取 id 为 hello 的元素 ★
var element = document.querySelector('#hello');

使用符合选择器 获取 ID 为 nav 的容器下的 text 类的元素 ;

// 获取 id 为 nav 元素下的 text 类的元素 ★
element = document.querySelector('#nav .text');

2、完整代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style></head><body><div id="hello">Hello1</div><div>Hello</div><div class="text">Hello</div><div id="nav"><div class="text">Hello2</div><div>Hello2</div><div>Hello2</div></div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 只获取 id 为 hello 的元素 ★var element = document.querySelector('#hello');// 控制台打印获取结果console.log(element);// 获取 id 为 nav 元素下的 text 类的元素 ★element = document.querySelector('#nav .text');// 控制台打印获取结果console.log(element);// 获取 文档中的 text 类的元素 ★element = document.querySelector('.text');// 控制台打印获取结果console.log(element);</script>
</body></html>

执行结果 :

在这里插入图片描述





二、querySelectorAll 函数



1、querySelectorAll 函数简介


Document 和 Element 都定义了 querySelectorAll 函数 , 分别从 HTML 文档 和 Element 元素 中查询 所有 指定符合 CSS 选择器 的 DOM 元素 ;


document.querySelectorAll 函数原型如下 :

var element = document.querySelectorAll(selectors);
  • selectors 参数 : 若干 有效的 CSS 选择器字符串 , 如果字符串内容不是 CSS 选择器则会抛出 SYNTAX_ERR 异常 ;
  • 返回值 : 返回 符合 CSS 选择器的 所有 DOM 元素 , 类型是 NodeList 对象 ;

NodeList 对象 与 HTMLCollection 对象类似 , 都封装了若干 Element 对象 ;


参考文档 :

  • querySelectorAll 函数 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
  • NodeList 对象 : https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

2、完整代码示例


完整代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style></head><body><div id="hello">Hello1</div><div>Hello</div><div class="text">Hello</div><div id="nav"><div class="text">Hello2</div><div>Hello2</div><div>Hello2</div></div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 获取 id 为 nav 元素下的 text 类的元素 ★var elements = document.querySelectorAll('#nav div');// 控制台打印获取结果console.log(elements);// 获取 文档中的 text 类的元素 ★elements = document.querySelectorAll('.text');// 控制台打印获取结果console.log(elements);</script>
</body></html>

执行结果 :

在这里插入图片描述





三、NodeList 对象



1、NodeList 对象简介


在上述 querySelectorAll 函数 中 , 获取的符合 指定选择器 的 所有 DOM 元素 , 返回值的类型是 NodeList 对象 ;

NodeList 对象 与 HTMLCollection 对象类似 , 都封装了若干 Element 对象 , 都是 类数组 ( Like Array Object ) 对象 , 可使用 数组下标的方式进行访问 ;


NodeList 对象 与 HTMLCollection 对象 的区别是 :

  • HTMLCollection 对象会实时更新 , 如果其中的 DOM 元素发生了改变 , HTMLCollection 对象会马上进行更新 ;
  • NodeList 对象 是静态的 , 在查询时就确定了元素的集合 , 并不会随着 DOM 的修改而自动更新 ;

参考文档 :

  • querySelectorAll 函数 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
  • NodeList 对象 : https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList

使用数组下标的方式 , 可遍历 NodeList 对象 :

        // 获取 id 为 nav 元素下的 text 类的元素 ★var elements = document.querySelectorAll('#nav div');// 控制台打印获取结果console.log(elements);// 使用数组下标方式遍历 NodeList 对象for (var i = 0; i < elements.length; ++i) {var item = elements[i];console.log(item);}

2、完整代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style></head><body><div id="hello">Hello1</div><div>Hello</div><div class="text">Hello</div><div id="nav"><div class="text">Hello2</div><div>Hello2</div><div>Hello2</div></div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 获取 id 为 nav 元素下的 text 类的元素 ★var elements = document.querySelectorAll('#nav div');// 控制台打印获取结果console.log(elements);// 使用数组下标方式遍历 NodeList 对象for (var i = 0; i < elements.length; ++i) {var item = elements[i];console.log(item);}</script>
</body></html>

执行结果 :
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/31424.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Hadoop大数据技术】——期末复习（冲刺篇）

【Hadoop大数据技术】——期末复习（冲刺篇）

&#x1f4d6; 前言&#xff1a;快考试了&#xff0c;做篇期末总结&#xff0c;都是重点与必考点。 题型&#xff1a;简答题、编程题&#xff08;Java与Shell操作&#xff09;、看图分析题。题目大概率会从课后习题、实验里出。 课本&#xff1a; 目录 &#x1f552; 1. HDF…
阅读更多...
FreeRTOS学习 -- 时间管理

FreeRTOS学习 -- 时间管理

在使用 FreeRTOS 的过程中通常会在一个任务函数中使用延时函数对这个任务延时&#xff0c;当执行延时函数的时候会进行任务切换&#xff0c;并且此任务就会进入阻塞态&#xff0c;直到延时完成&#xff0c;任务重新进入就绪态。 FreeRTOS 延时函数 1、函数 vTaskDelay() 在F…
阅读更多...
用Nuitka打包 Python，效果竟如此惊人！

用Nuitka打包 Python，效果竟如此惊人！

目录 为什么选择Nuitka&#xff1f; Nuitka的工作原理 Nuitka的工作流程大致如下&#xff1a; 安装Nuitka 实战案例 示例代码 打包程序 运行可执行文件 进阶技巧 优化选项 多文件项目 打包第三方库 使用Python开发一个程序后&#xff0c;将Python脚本打包成独立可执…
阅读更多...
深度神经网络——决策树的实现与剪枝

深度神经网络——决策树的实现与剪枝

概述 决策树 是一种有用的机器学习算法&#xff0c;用于回归和分类任务。 “决策树”这个名字来源于这样一个事实&#xff1a;算法不断地将数据集划分为越来越小的部分&#xff0c;直到数据被划分为单个实例&#xff0c;然后对实例进行分类。如果您要可视化算法的结果&#xf…
阅读更多...
Web开发的未来：深入Symfony框架的全方位指南

Web开发的未来：深入Symfony框架的全方位指南

Symfony是一款强大的PHP框架&#xff0c;用于开发高性能的Web应用。它提供了一套完整的工具和API&#xff0c;帮助开发者构建从简单的博客到复杂的企业级应用。本文将全面介绍Symfony框架的基本概念、使用方法、主要作用以及注意事项。 一、Symfony框架简介 1. Symfony的起源 …
阅读更多...
数据结构5---矩阵和广义表

数据结构5---矩阵和广义表

一、矩阵的压缩存储 特殊矩阵:矩阵中很多值相同的元素并且它们的分布有一定的规律。 稀疏矩阵:矩阵中有很多零元素。压缩存储的基本思想是: (1)为多个值相同的元素只分配一个存储空间; (2)对零元素不分配存储空间。 1、特殊矩阵的压缩存储 &#xff08;1&#xff09;对称矩…
阅读更多...
【机器学习】必会降维算法之：随机投影（Random Projection）

【机器学习】必会降维算法之：随机投影（Random Projection）

随机投影&#xff08;Random Projection&#xff09; 1、引言2、随机投影&#xff08;Random Projection&#xff09;2.1 定义2.2 核心原理2.3 应用场景2.4 实现方式2.5 算法公式2.6 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;降维算法还没讲完呢。 小鱼&a…
阅读更多...
浙江保融科技2025实习生校招校招笔试分享

浙江保融科技2025实习生校招校招笔试分享

笔试算法题一共是有4道&#xff0c;第一道是手搓模拟实现一个ArrayList&#xff0c;第二道是判断字符串是否回文&#xff0c;第三道是用代码实现1到2种设计模式。 目录 一.模拟实现ArrayList 二.判断字符串是否回文 ▐ 解法一 ▐ 解法二 ▐ 解法三 三.代码实现设计模式 一…
阅读更多...
网络协议安全：TCP/IP协议栈的安全问题和解决方案

网络协议安全：TCP/IP协议栈的安全问题和解决方案

「作者简介」：北京冬奥会网络安全中国代表队，CSDN Top100，就职奇安信多年，以实战工作为基础对安全知识体系进行总结与归纳，著作适用于快速入门的 《网络安全自学教程》，内容涵盖Web安全、系统安全等12个知识域的一百多个知识点，持续更新。 这一章节我们需要知道TCP/IP每…
阅读更多...
大模型扫盲系列——大模型实用技术介绍_大模型底层技术是哪些

大模型扫盲系列——大模型实用技术介绍_大模型底层技术是哪些

Gemma模型架构和参数计算 近期&#xff0c;大模型相关的技术和应用层出不穷&#xff0c;各个方向的论文百花齐放&#xff0c;底层的核心技术是大家公认的精华部分。本文从技术的角度聚焦大模型的实战经验&#xff0c;总结大模型从业者关注的具体方向以及相关发展&#xff0c;帮…
阅读更多...
干货 | 如何进行群体DNA甲基化分析

干货 | 如何进行群体DNA甲基化分析

目前&#xff0c;针对群体的研究基本上还是以重测序为主&#xff0c;基于对遗传多样性丰富的自然群体中的个体进行全基因组重测序&#xff0c;研究物种遗传进化多样性&#xff0c;结合准确的目标性状的表型数据及统计方法进行全基因组关联分析&#xff0c;可对动植物复杂农艺性…
阅读更多...
MEME使用-motif分析（生物信息学工具-24）

MEME使用-motif分析（生物信息学工具-24）

01 背景 Motif分析是一种在生物信息学和计算生物学中广泛应用的技术&#xff0c;用于识别DNA、RNA或蛋白质序列中具有生物学功能的短保守序列模式&#xff08;motif&#xff09;。这些motif通常与特定的生物学功能相关&#xff0c;如DNA中的转录因子结合位点、RNA中的剪接位点…
阅读更多...
最新Springboot小程序医院核酸检测服务系统

最新Springboot小程序医院核酸检测服务系统

采用技术 最新Springboot小程序医院核酸检测服务系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 管理员页面 医护人员管理 普通管理员管理 接种进…
阅读更多...
稳定安全生产设备日志采集工具

稳定安全生产设备日志采集工具

免费试用下载: Gitee下载 最新版本 优势: A. 开箱即用. 解压直接运行.不需额外安装. B. 批管理设备. 设备配置均在后台管理. C. 无人值守 客户端自启动,自更新. D. 稳定安全. 架构简单,内存占用小,通过授权访问.
阅读更多...
vector oj题 和 位运算

vector oj题 和 位运算

知识点1&#xff1a; lowbit(x) 简介&#xff1a;众所周知&#xff0c;lowbit()操作是算法竞赛中的高级技巧&#xff0c;特别是高级数据结构&#xff0c;线段树的核心&#xff0c;还有什么二进制与位运算题目&#xff0c;而本文就用最通俗易懂的话&#xff0c;来教会大家lowbi…
阅读更多...
【MySQL系列】MySQL 字符集的演变与选择

【MySQL系列】MySQL 字符集的演变与选择

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
[信号与系统]有关滤波器的一些知识背景

[信号与系统]有关滤波器的一些知识背景

前言 最近在看FIR和IIR&#xff0c;本文作为前置&#xff0c;需要在理解这两种滤波器之前阅读。 本文内容会详细讲述一下有关滤波器的技术要求。 选频滤波器的频率响应 选频滤波器&#xff08;Selective Frequency Filter&#xff09;的频率响应是描述该滤波器在不同频率下…
阅读更多...
中国企业数字化转型现状、趋势和挑战

中国企业数字化转型现状、趋势和挑战

一、来自不同行业、不同所有制的145家企业的调查 为了了解中国企业数字化转型的现状、趋势和挑战&#xff0c;2022年我们完成了一次在线问卷调查。 受访企业达145家&#xff0c;国内企业111家&#xff0c;占比77%&#xff08;其中央企占总比例51%&#xff09;&#xff0c;民营…
阅读更多...
【数据结构与算法（C语言）】离散事件模拟- 单链表和队列的混合实际应用

【数据结构与算法（C语言）】离散事件模拟- 单链表和队列的混合实际应用

目录 1. 前言2. 流程图3. 数据结构3.1 单链表3.2 链式队列 4. 核心函数4.1 银行业务模拟 void BankSimulation()4.2 初始化 void OpenForDay()4.3 客户到达 void CustomerArrived(Event en)4.4 客户离开 void CustomerArrived(Event en) 5. 非核心函数5.1 新建客户 NewCustomer…
阅读更多...
Redis精要

Redis精要

一、什么是缓存击穿、缓存穿透、缓存雪崩&#xff1f; 缓存穿透 【针对大量非法访问的请求&#xff0c;缓存中没有&#xff0c;直接访问DB】 缓存穿透指的查询缓存和数据库中都不存在的数据&#xff0c;这样每次请求直接打到数据库&#xff0c;就好像缓存不存在 一样。 对于系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023