JavaScript选择器函数querySelector和querySelectorAll

目录
  • 一、querySelector查询单个元素
    • 1. Document实例调用
    • 2. Element实例调用
  • 二、querySelectorAll查询所有元素
    • 1、for in遍历的问题
    • 2、快照而非实时的问题
  • 三、小结

选择器是Css非常强大的功能,早先一般是通过getElementByIdgetElementsByTagName来获取页面元素,在一些场景下就很不方便。

后来DOM扩展出了Selector API标准,其中 Selector API Level 1 包含了querySelectorquerySelectorAll两个方法,可以通过Css选择器匹配页面元素。

一、querySelector查询单个元素

querySelector用于查询页面中第一个符合规则的元素,可以在Document实例和Element实例上调用,接收一个选择器字符串参数,如果查找到则返回 HTMLElement 对象,否则返回null

语法格式如下:

Document实例.querySelector(选择器字符串);

Element实例.querySelector(选择器字符串);

1. Document实例调用

Document实例调用是获取整个页面匹配的元素。

简单示例如下:

// 获取body元素

let body = document.querySelector("body");

console.log(body)

// 获取id为container的元素,只会获取第一个

let container = document.querySelector("#container");

console.log(container)

// 获取class中包含btn的元素,只会获取第一个

let btn = document.querySelector(".btn");

console.log(btn);

// 获取container直接子类class中包含btn的元素,只会获取第一个

let containerBtn = document.querySelector("#container>.btn");

console.log(containerBtn);

2. Element实例调用

Element实例调用是获取该元素子树内匹配的元素。

简单示例:

// 获取ID为container的元素

let container = document.querySelector("#container");

// 需要检测元素对象是否存在,存在才有 querySelector 方法

if (container) {

	// 只查找 container 内class包含 btn 的元素。

	let containerBtn = container.querySelector(".btn");

	console.log(containerBtn);

}

理论上来讲,因为Css可以通过选择器获取页面任意的元素,所以Element实例调用可以直接写成Document实例的调用方式,只需要修改选择器字符串参数即可。

例如上例就可以直接写成如下方式:

let containerBtn = document.querySelector("#container .btn");

并且因为少了一个if判断,代码就更加简洁。当然在有些业务场景下,ELement实例是已经确定的了,那么直接用 ELement实例 调用就更加方便了。

二、querySelectorAll查询所有元素

querySelectorAll方法和querySelector方法类似,只是它是返回所有匹配的元素,类型是NodeList

简单示例:

// 假设页面有两个div类名包含 article

// 获取所有类包含 article 的元素

let articleList = document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length);

// 控制台输出:

//	NodeList(2) [div.article, div.article]

//	2

querySelectorAll方法返回的是所有元素,在实务中经常需要遍历,遍历可以使用常规的for遍历、for of遍历和forEach遍历。

// for of 遍历

for (let item of articleList) {

	console.log(item);

}

// for 遍历

for (let i = 0; i < articleList.length; i++) {

	console.log(articleList[i]);

	console.log(articleList.item(i));

}

// forEach 遍历

articleList.forEach((item, index) => {

	console.log(item, index);

});

1、for in遍历的问题

如果使用for in遍历,则会把原型链上的一些方法也遍历出来,如entriesforEach等。

2、快照而非实时的问题

使用querySelectorAll方法获取的NodeList是快照,而非实时的数据。

请看下面这个例子:

// 使用 querySelectorAll 获取,articleList 是静态的,非实时的

let articleList = document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length); // 2

setTimeout(() => {

	// 增加一个元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);	

	console.log(articleList);

	// 依旧为2

	console.log(articleList.length);

}, 0);

最后设置了一个定时器,往页面塞了一个classarticlediv元素,但是 articleList 的长度依旧是2。

如果是用getElementsByClassName获取,那么 articleList 就是实时的数据。

请看如下例子:

// 使用 getElementsByClassName 获取,articleList是实时的

let articleList = document.getElementsByClassName("article");

console.log(articleList);

console.log(articleList.length);

setTimeout(() => {

	// 增加一个元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);

	console.log(articleList);

	// 这里为3

	console.log(articleList.length);

}, 0);

在控制台查看打印结果:

HTMLCollection动态效果:

使用 getElementsByClassName 获取的对象是 HTMLCollection 类型,会随文档流变化而变化。                  

三、小结

  • 1. querySelectorquerySelectorAll根据Css选择器获取页面元素,功能很强大。
  • 2. querySelectorAll获取的元素是快照,静态的,而非实时的,注意踩坑。

到此这篇关于 JavaScript选择器函数querySelectorquerySelectorAll的文章就介绍到这了,更多相关 JavaScript中的querySelector和querySelectorAll内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-24

泛谈JS逻辑判断选择器 || &&

前言 || 与 &&在JS里与其它语言不一样,这是选择器运算符,而非逻辑运算符. 对于||来说,若判断为true,则返回第一个值,为false返回第二个值. &&相反,若判断为 true,则返回第二个,为 false为返回第一个值. 绝对不是像其它语言那样返回true或false,而是会返回第一个值或第二个值. 简单的测试代码 先是true与false的测试,后将false改为数值0. 除了|| 与&&之外易让人疑惑外,JS里的假值表也算是个大疑点. let

远离JS灾难css灾难之 js私有函数和css选择器作为容器

尽管js可以想面向对象那样去构造对象,隐藏私有方法,但需求变化的往往比你写程序还要快时,就连设计js对象的时间也没有了,所以我比较倾向于用js私有函数和js方法:jquery私有函数和jquery对外暴露方法的形式也可以实现,而页面生成的html结构则完全在js中生成,包括哪些id和class, 这样可以最大限度的确保统一和重用的方便性,但也有个缺点,就是在重用时,如果需要样式发生变化(结构是死的不能变化),就需要用div将原来的结构包起来,相关的样式也需要用对应的id包裹一遍,如果是新增的事件

了解JavaScript中的选择器

在html5之前只有下面四种选择器 .getElementById("id")id选择器; .getElementsByName("name")name选择器; .getElementsByTagName("tagname")tag标签名选择器: .getElementsByClassName(".classname").class名选择器 示例代码: <!DOCTYPE html><html><

js实现圆形菜单选择器

本文实例为大家分享了js实现圆形菜单选择器的具体代码,供大家参考,具体内容如下 代码: <head> <style> .mask{ position: absolute; width: 502px; height: 252px; left:300px; top:350px; background: white; z-index: 999; } .con { width: 500px; height: 500px; overflow: hidden; position: absolu

Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

Vue.js 中的实用工具方法【推荐】

收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器.公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from 'vue' import moment from 'moment' /** * @filter dateFormat 时间格式化 * @param {String, Date} value 可被 new Date 解析的字符串 * @param {String} formatStr moment 的 format 字符串 * 使用方法 {{ 20

在vue项目中引用Iview的方法

关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro

vue.js中mint-ui框架的使用方法

本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

Vue.js中的图片引用路径的方式

当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

如何在 Vue.js 中使用第三方js库

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到

vue.js中指令Directives详解

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令

深入理解vue.js中的v-if和v-show

本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件:v-show只是简单的基于css切换: (3)编译条件:v-if是惰性的,如果初始条件为假,

Vue.js中数组变动的检测详解

前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

深入理解vue.js中$watch的oldvalue与newValue

$watch中的oldvalue和newValue 大家都知道,在vue.js中给我们提供了$watch的方法来做对象变化的监听,而且在callback中会返回两个对象,分别是oldValue和newValue. 顾名思义,这两个对象就是对象发生变化前后的值. 但是在使用过程中我发现这两个值并不总是预期的.下面来一起看看详细的介绍: 定义data的值 data: { arr: [{ name: '笨笨', address: '上海' }, { name: '笨笨熊', address: '北京'