【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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ACL2024 | AI的时空穿越记：大型语言模型共时推理的奇幻之旅！

ACL2024 | AI的时空穿越记：大型语言模型共时推理的奇幻之旅！

作者&#xff1a;苏肇辰 标题&#xff1a;Living in the Moment: Can Large Language Models Grasp Co-Temporal Reasoning? 录取&#xff1a;ACL2024 Main 论文链接&#xff1a;https://arxiv.org/abs/2406.09072 代码链接&#xff1a;https://github.com/zhaochen0110/Cotem…
阅读更多...
T200HSA单路SDI/HDMI+1路3.5音频高清万能采集卡

T200HSA单路SDI/HDMI+1路3.5音频高清万能采集卡

产品简介&#xff1a; 同三维T200HSA单路高清万能采集卡&#xff0c;可以采集1路SDI/HDMI高清信号1路3.5音频信号&#xff0c;卡上有1个是HDMI接口1个是SDI接口1个3.5音频口&#xff0c;配件有&#xff1a; 1个小档板&#xff0c;PCI-E2.0 X1&#xff0c;分辨率最高可以达到10…
阅读更多...
利用星穹云Serverless云平台高效开发小程序的技术实践

利用星穹云Serverless云平台高效开发小程序的技术实践

一、引言 在快速迭代、持续创新的互联网环境下&#xff0c;开发者们面临着巨大的挑战。传统的小程序开发模式不仅需要掌握后端技术&#xff0c;还需要关注服务器部署、维护等一系列问题&#xff0c;这无疑增加了开发者的学习成本和项目复杂度。而Serverless架构的兴起&#xf…
阅读更多...
【Android】Android Studio版本手动升级到指定版本方法

【Android】Android Studio版本手动升级到指定版本方法

前言 Android Studio本身存在自动升级的功能&#xff0c;但是这个功能使用的时候基本都是要升级到最新版本&#xff0c;但是有时候我们也不想升级到最新版本&#xff0c;是想升级到某一个版本&#xff0c;这个时候&#xff0c;Android Studio的自动升级版本的功能就无法使用了…
阅读更多...
简单分享github

简单分享github

一、官网 GitHub: Let’s build from here GitHub 二、注册 通过简单的注册步骤&#xff0c;你就可以拥有一个属于自己的GitHub账号。再简单注册完成之后会需要验证你所输入的邮箱才能正常使用你的GitHub。 三、设置自己的库 在注册完成之后&#xff0c;完成一些简单的设置之…
阅读更多...
数据库系统概论——数据库恢复技术

数据库系统概论——数据库恢复技术

文章目录 数据库恢复技术事务的基本概念什么是事务如何定义事务&#xff1a;事务的特性 数据库恢复概述故障的种类恢复的实现技术恢复策略事务故障的恢复系统故障的恢复介质故障的恢复 数据库恢复技术 事务的基本概念 什么是事务 事务使用户定义的一个数据库操作序列&#x…
阅读更多...
排序算法Java_实现

排序算法Java_实现

1.引言 查找和排序算法是算法的入门知识&#xff0c;其经典思想可以用于比较常见。 1.1 内部排序和外部排序的区别 内部排序&#xff1a;待排序记录存放在计算机随机存储器中(内存)进行排序的过程。 外部排序&#xff1a;待排序记录的数量很大&#xff0c;以至于内存不能一…
阅读更多...
AI与区块链的融合：Web3时代下的新应用探索

AI与区块链的融合：Web3时代下的新应用探索

本文来源香港Web3媒体Techub News AI与区块链&#xff1a;Web3时代的新机遇 在香港这座金融与科技交汇的繁荣都市&#xff0c;AI与区块链的结合已经成为Web3时代的重要议题&#xff0c;为行业发展带来了新的可能性和机遇。越来越多的开发者正在积极探索这一领域的融合&#xff…
阅读更多...
复分析——第5章——整函数(复可积函数)(E.M. Stein R. Shakarchi)

复分析——第5章——整函数(复可积函数)(E.M. Stein R. Shakarchi)

第5章 整函数(复可积函数)(Entire Functions) ...but after the 15th of October I felt myself a free man, with such longing for mathematical work, that the last two months flew by quickly, and that only today I found the letter of the 19th of October that…
阅读更多...
鸿蒙 Web组件的生命周期（api10、11、12）

鸿蒙 Web组件的生命周期（api10、11、12）

概述 开发者可以使用Web组件加载本地或者在线网页。 Web组件提供了丰富的组件生命周期回调接口&#xff0c;通过这些回调接口&#xff0c;开发者可以感知Web组件的生命周期状态变化&#xff0c;进行相关的业务处理。 Web组件的状态主要包括&#xff1a;Controller绑定到Web组…
阅读更多...
2024广东省职业技能大赛云计算赛项实战——Ansible部署Zabbix

2024广东省职业技能大赛云计算赛项实战——Ansible部署Zabbix

Ansible部署Zabbix 前言 今年的比赛考了一道Ansible部署Zabbix的题目&#xff0c;要求就是用两台centos7.5的云主机&#xff0c;一台叫ansible&#xff0c;一台叫node&#xff0c;使用对应的软件包&#xff0c;通过ansible节点控制node节点安装zabbix服务。这道题还是算比较简…
阅读更多...
计算机网络 —— 应用层（电子邮件）

计算机网络 —— 应用层（电子邮件）

计算机网络 —— 应用层&#xff08;电子邮件&#xff09; 电子邮件发送电子邮件的过程SMTP特性工作流程 电子邮件格式MIME关键组件工作方式 POP/IMAPPOP&#xff08;邮局协议&#xff09;IMAP&#xff08;因特网邮件访问协议&#xff09; 基于万维网的电子邮箱特点优势常见的基…
阅读更多...
vscode c++ 开发环境配置

vscode c++ 开发环境配置

今天各位同学已经安装了mingw环境&#xff0c;但部分同学vscode开发环境又问题&#xff0c;究其原因&#xff0c;还是vscode 编译环境配置错误&#xff0c;有问题的同学 按如下步骤处理&#xff1a; 1、卸载相关插件。按下列步骤重新安装插件。 2、继续在搜索框中搜索并安装 C…
阅读更多...
SpringSecurity6从入门到实战之登录后操作

SpringSecurity6从入门到实战之登录后操作

SpringSecurity6从入门到实战之登录后操作 上次已经了解了如何进行自定义登录页面,这次主要是详细讲解登录成功,登录之后的跳转以及包括退出登录等一系列操作.让我们来看看SpringSecurity需要如何进行配置 登录之后的跳转 定义 Spring Security 配置类 Configuration EnableW…
阅读更多...
一个简单好用安全的开源交互审计系统,支持SSH,Telnet,Kubernetes协议

一个简单好用安全的开源交互审计系统,支持SSH,Telnet,Kubernetes协议

前言 在当今的企业网络环境中&#xff0c;远程访问和交互审计成为了保障网络安-全的重要组成部分。然而&#xff0c;现有的解-决方案往往存在一些痛点&#xff0c;如复杂的配置、有限的协议支持、以及审计功能的不足。这些问题不仅增加了IT管理员的负担&#xff0c;也为企业的…
阅读更多...
第一个Java程序

第一个Java程序

编写第一个Java程序通常从经典的"Hello,World!"程序开始。下面是一个简单的Java程序示例&#xff0c;它将打印出"Hello, World!"到控制台&#xff1a; 1.编写代码&#xff1a; 打开文本编辑器&#xff08;如记事本、Notepad、Visual StudioCode等&#x…
阅读更多...
JavaSE 利用正则表达式进行本地和网络爬取数据(爬虫)

JavaSE 利用正则表达式进行本地和网络爬取数据(爬虫)

爬虫 正则表达式的作用 作用1&#xff1a;校验字符串是满足规则 作用2&#xff1a;在一段文本中查找满足需要的内容 本地爬虫和网络爬虫 Pattern类 表示正则表达式 Matter类 文本编译器&#xff0c;作用按照正则表达式的规则去读取字符串&#xff0c;从头开始读取&#xf…
阅读更多...
永磁同步电机最大转矩电流比(MTPA)与弱磁(FW)算法以及模型设计

永磁同步电机最大转矩电流比(MTPA)与弱磁(FW)算法以及模型设计

永磁同步电机数学模型如下&#xff1a; 上式中&#xff1a; vd为 d 轴电压&#xff08;V&#xff09;。 vq为 q 轴电压&#xff08;V&#xff09;。 id为 d 轴电流&#xff08;A&#xff09;。 iq为 q 轴电流&#xff08;A&#xff09;。 Rs为定子相绕组电阻&#xff08;Ω…
阅读更多...
SM9加密算法：安全、高效的国产密码技术

SM9加密算法：安全、高效的国产密码技术

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。加密算法作为保障信息安全的核心技术&#xff0c;受到了广泛关注。在我国&#xff0c;一种名为SM9的加密算法逐渐崭露头角&#xff0c;凭借其卓越的安全性能和高效计算能力&#xff0c;成为了新一代国产密码技术的代表…
阅读更多...
【鸿蒙】HUAWEI DevEco Studio安装

【鸿蒙】HUAWEI DevEco Studio安装

HUAWEI DevEco Studio介绍 面向HarmonyOS应用及元服务开发者提供的集成开发环境(IDE)&#xff0c; 助力高效开发。 DevEco Studio当前最新版本是&#xff1a; 3.1。 DevEco Studio计划里程碑 版本类型说明 下载 下载网址&#xff1a;DevEco Studio安装包官⽅下载 双击运行…
阅读更多...
最新文章

Copyright @ 2022~2023