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

news2024/11/27 22:34:39

文章目录

  • 一、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.coloradmin.cn/o/1845016.html

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

相关文章

Vue 自定义ElementUI的Loading效果

Vue 自定义ElementUI的Loading效果

import { loadingText, messageDuration } from "/settings";import { Loading } from "element-ui"; // loadingText、messageDuration 这两个参数我是调的公共配置文件,按自己需求来 const install (Vue, opts {}) > {/* 全局多彩Loading加载层 *…
阅读更多...
办公技能——如何写好会议纪要，提升职业素养

办公技能——如何写好会议纪要，提升职业素养

一、什么是会议纪要 会议纪要是一种记载、反映会议情况和议定事项的纪实性公文&#xff0c;是贯彻落实会议精神、指导工作、解决问题、交流经验的重要工具。 会议纪要可以多向行文&#xff1a;向上级机关汇报会议情况&#xff0c;以便得到上级机关对工作的指导&#xff1b;向同…
阅读更多...
算法导论 总结索引 | 第四部分 第十五章：数据结构的扩张

算法导论 总结索引 | 第四部分 第十五章：数据结构的扩张

1、动态规划&#xff08;dynamic programming&#xff09;与分治方法相似&#xff0c;都是通过组合子问题的解 来求解原问题 分治方法 将问题划分为互不相交的子问题&#xff0c;递归地求解子问题&#xff0c;再将它们的解组合起来。求出原问题的解 与之相反&#xff0c;动态规…
阅读更多...
2024广东省职业技能大赛云计算赛项实战——编排部署ERP管理系统

2024广东省职业技能大赛云计算赛项实战——编排部署ERP管理系统

编排部署ERP管理系统 前言 编写docker-compose.yaml文件&#xff0c;要求使用镜像mysql、redis、nginx和erp完成ERP管理系统的编排部署。 编写docker-compose.yaml完成ERP管理系统的部署&#xff0c;要求定义mysql、redis、nginx和erp共四个Service&#xff0c;分别使用镜像e…
阅读更多...
Linux工具（包含sudo提权与vim快捷配置）

Linux工具（包含sudo提权与vim快捷配置）

目录 什么是软件包 查看软件包 如何安装软件 1.官方yum源下载 2.扩展yum源下载 如何卸载软件 补充知识如何将普通用户加入白名单 补充知识rzsz vim编辑器 1.命令模式&#xff08;进入默认为这个模式&#xff09;用户所有的输入都会被当成命令 2.插入模式 3.底行模…
阅读更多...
排序算法Java_实现

排序算法Java_实现

1.引言 查找和排序算法是算法的入门知识&#xff0c;其经典思想可以用于比较常见。 1.1 内部排序和外部排序的区别 内部排序&#xff1a;待排序记录存放在计算机随机存储器中(内存)进行排序的过程。 外部排序&#xff1a;待排序记录的数量很大&#xff0c;以至于内存不能一…
阅读更多...
MyBatisplus使用报错--Invalid bound statement

MyBatisplus使用报错--Invalid bound statement

报错如下 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.lotus.mybatis.mapper.UserMapper.selectListat org.apache.ibatis.binding.MapperMethod$SqlCommand.<init>(MapperMethod.java:235)at com.baomidou.mybatisplus.cor…
阅读更多...
微软TTS最新模型，发布9种更真实的AI语音

微软TTS最新模型，发布9种更真实的AI语音

很高兴与大家分享 Azure AI 语音翻译产品套件的两个重大更新&#xff1a; 视频翻译和增强的实时语音翻译 API。 视频翻译&#xff08;批量&#xff09; 今天&#xff0c;我们宣布推出视频翻译预览版&#xff0c;这是一项突破性的服务&#xff0c;旨在改变企业本地化视频内容…
阅读更多...
onlyoffice报错：这份文件无法保存。请检查连接设置或联系您的管理员当你点击

onlyoffice报错：这份文件无法保存。请检查连接设置或联系您的管理员当你点击

文章目录 一、onlyoffice报错&#xff1a;这份文件无法保存。请检查连接设置或联系您的管理员当你点击二、解决方法总结 一、onlyoffice报错&#xff1a;这份文件无法保存。请检查连接设置或联系您的管理员当你点击 二、解决方法 禁用防火墙 sudo ufw disable总结 作者&…
阅读更多...
MySQL 面试突击指南：核心知识点解析1

MySQL 面试突击指南：核心知识点解析1

MySQL中有哪些存储引擎？ InnoDB存储引擎 InnoDB是MySQL的默认事务型引擎，也是最重要、使用最广泛的存储引擎，设计用于处理大量短期事务。 MyISAM存储引擎 在MySQL 5.1及之前版本，MyISAM是默认的存储引擎。它提供了全文索引、压缩、空间函数（GIS）等特性，但不支持事务和…
阅读更多...
Linux ls-al命令实现，tree命令实现，不带缓存的文件IO（open,read,write）

Linux ls-al命令实现，tree命令实现，不带缓存的文件IO（open,read,write）

shell命令 ls -al 实现 #include <43func.h> void error_check(int ret, const char *msg) {if (ret -1) {perror(msg);exit(EXIT_FAILURE);} }char get_file_type(mode_t mode) {if (S_ISREG(mode)) return -;//检查给定的文件模式&#xff08;通常是从 stat 或 lst…
阅读更多...
36.6K star！Immich - 一款开源高性能的自托管照片和视频备份方案

36.6K star！Immich - 一款开源高性能的自托管照片和视频备份方案

大家好&#xff0c;今天给大家分享的是一个高性能的自托管照片和视频备份方案。 Immich 是一个图片管理和分享平台&#xff0c;它允许用户高效地组织、存储和访问他们的照片和视频集合。这个项目特别设计来优化个人和家庭的多媒体内容管理体验&#xff0c;提供了诸如自动备份、…
阅读更多...
贾英才主任受聘担任“两个中心”专家委员会委员

贾英才主任受聘担任“两个中心”专家委员会委员

近日&#xff0c;第二届海峡两岸中西医结合肾脏病学术大会授牌仪式在北京隆重举行。 这一盛会吸引了众多医学领域的专家学者&#xff0c;共同探讨中西医结合治疗肾脏病的最新进展和未来发展方向。 在此次大会上&#xff0c;崇文门中医医院的贾英才主任凭借其在肾脏病领域的卓…
阅读更多...
绝地求生PUBG联名补偿奖励来了 补偿奖励介绍详情解析

绝地求生PUBG联名补偿奖励来了 补偿奖励介绍详情解析

绝地求生》(PUBG) 作为一款战术竞技型射击类沙盒游戏&#xff0c;从上线以来就深受玩家小伙伴们的喜爱&#xff0c;即便是没有玩过的小伙伴&#xff0c;对“吃 鸡”二字想必也是很耳熟的&#xff0c;这正是《绝地求生》(PUBG) 的别称。 在北京时间6月12日&#xff0c;由于绝地求…
阅读更多...
挑战从不是终点，而是人生的起点

挑战从不是终点，而是人生的起点

对于交易员来说&#xff0c;每一次市场的起伏都是对内心坚韧与技能精进的考验。无论遭遇的是挫败还是辉煌&#xff0c;它们都是通向卓越道路上不可或缺的磨砺。正是在这些磨难与历练中&#xff0c;我们不断重塑自我&#xff0c;锤炼技术&#xff0c;直至面对看似难以逾越的障碍…
阅读更多...
行业唯一！三翼鸟场景品牌战略推动价值凸显

行业唯一！三翼鸟场景品牌战略推动价值凸显

文 | 智能相对论 作者 | 佘凯文 当你的一只羊跑进别人的羊群中&#xff0c;怎么才能找到它&#xff1f; 从前人们为了区分自己的财产&#xff0c;会用烧红的铁块印在动物身上作为标记。在中世纪的欧洲&#xff0c;手工艺匠人用这种烧灼的方法在自己的手工艺品上烙下标记&…
阅读更多...
会声会影2024 视频编辑创作利器 #AI智能剪辑 #特效资源库 #共创共享 #视频创作爱好者

会声会影2024 视频编辑创作利器 #AI智能剪辑 #特效资源库 #共创共享 #视频创作爱好者

&#x1f31f;【全新升级&#xff01;会声会影2024&#xff0c;视频编辑的革新之作】&#x1f31f; 嗨&#xff0c;CSDN的朋友们&#xff0c;今天要跟大家分享一款让我彻底震撼的视频编辑软件——会声会影2024最新版本&#x1f3ac;&#xff01;作为一位热爱创作的内容创作者&a…
阅读更多...
昇思25天学习打卡营第3天|数据集 Dataset|数据变换 Transforms

昇思25天学习打卡营第3天|数据集 Dataset|数据变换 Transforms

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) 数据集 Dataset 数据是深度学习的基础&#xff0c;高质量的数据输入将在整个深度神经网络中起到积极作用。MindSpore提供基于Pipeline的数据引擎&#xff0c;通过数据集&#xff08;Dataset&am…
阅读更多...
chatgpt: linux 下用纯c 编写一按钮，当按钮按下在一新窗口显示hello world

chatgpt: linux 下用纯c 编写一按钮，当按钮按下在一新窗口显示hello world

用这个程序模板&#xff0c;就可以告别只能在黑框框的终端中编程了。 在 Linux 环境下使用纯 C 语言编写一个按钮&#xff0c;当按钮按下时&#xff0c;在一个新窗口显示 "Hello World"。我们可以使用 GTK 库来实现这个功能。GTK 是一个用于创建图形用户界面的跨平台…
阅读更多...
论文辅导 | 基于K-means聚类和ELM神经网络的养殖水质溶解氧预测

论文辅导 | 基于K-means聚类和ELM神经网络的养殖水质溶解氧预测

辅导文章 模型描述 1&#xff09;相似度统计量构造。数据归一化后&#xff0c;利用皮尔森相关系数确定环境因子权重&#xff0c;构造相似日的统计量&#xff0d;相似度。 2&#xff09;K-means 聚类。根据相似度应用 K-means 聚类法对历史日数据样本聚类&#xff0c;找出合适样…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023