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

韩曙亮2024-06-21 8:58

文章目录

  • [一、querySelector 函数](#一、querySelector 函数)
  • [二、querySelectorAll 函数](#二、querySelectorAll 函数)
  • [三、NodeList 对象](#三、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 函数原型如下 :

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

CSS 选择器参考 :

给定如下 HTML 标签 :

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 元素 ;

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

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

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

2、完整代码示例

代码示例 :

html 复制代码 
<!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 函数原型如下 :

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

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

参考文档 :

2、完整代码示例

完整代码示例 :

html 复制代码 
<!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 的修改而自动更新 ;

参考文档 :

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

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);
        }

2、完整代码示例

代码示例 :

html 复制代码 
<!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>

执行结果 :

相关推荐
qq_177767378 分钟前
React Native鸿蒙跨平台数据使用监控应用技术，通过setInterval每5秒更新一次数据使用情况和套餐使用情况，模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头882111 分钟前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数，用于处理用户交互和状态更新，通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
程序员清洒2 小时前
Flutter for OpenHarmony：Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季6662 小时前
Flutter 三端应用实战：OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
天人合一peng3 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
会飞的战斗鸡3 小时前
JS中的链表(含leetcode例题)
javascript·leetcode·链表
方也_arkling3 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例，包含答辩的问题和答案
前端
qq_177767374 小时前
React Native鸿蒙跨平台剧集管理应用实现，包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767374 小时前
React Native鸿蒙跨平台自定义复选框组件，通过样式数组实现选中/未选中状态的样式切换，使用链式调用替代样式数组，实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书032026美赛A题智能手机电池续航时间预测的连续时间数学模型04OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)05OpenClaw部署与配置教程：在Mac mini上接入国产大模型与飞书062025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望07Linux下V2Ray安装配置指南08【Milvus】向量数据库pymilvus使用教程092026数学建模美赛题目特点与选题建议，常用四大模型汇总10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services