javascript之querySelector和querySelectorAll使用说明


Posted in Javascript onOctober 09, 2011

一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时。

下面是我的jsFiddle示例,我就以此展开说明:

(function(global) { 
global.doc = document; 
global.body = doc.getElementsByTagName('body')[0]; 
global.$ = function(id) { 
return doc.getElementById(id); 
} global.Logger = function(id) { 
this.logElem = $(id); 
this.logArr = []; 
}; 
global.Logger.prototype = { 
constructor: global.logger, 
append: function(comment) { 
this.logArr.push('<p>' + comment + '</p>'); 
}, 
flush: function() { 
this.logElem.innerHTML = this.logArr.join(''); 
}, 
clear: function() { 
this.logElem.innerHTML = ''; 
this.logArr = []; 
} 
}; 
})(this); 
(function() { 
var logger = new Logger('log'); 
var items = $('inner').querySelectorAll('#main h4.inside'); 
logger.append(items.length); 
for(var i = 0, len = items.length; i < len; i++) { 
logger.append(items[i].innerHTML); 
} 
logger.flush(); 
})();

误解就在于对$('inner').querySelectorAll('#main h4.inside')的实现理解,不少人一开始几乎都认为是直接从div[id='inner']的孩子中进行查找(我也是),这个#main有点碍眼。实际上它还是根据selector string从整个document上查找,再返回属于div[id='inner']的子节点。很多人会疑惑,那么为什么不按照直接按父节点找子节点的方式来实现呢?就像elem.getElementsByTagName,我的想法是灵活selector string吧。

querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。

querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。

并且返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。

目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)。

Javascript 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 #Javascript
jQuery实现切换页面布局使用介绍
Oct 09 #Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 #Javascript
关于jQuery的inArray 方法介绍
Oct 08 #Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 #Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 #Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php数组键值用法实例分析
2015/02/27 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
北京SQL新华信咨询
2016/09/30 面试题
中专生自我鉴定
2013/12/17 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
MongoDB使用场景总结
2022/02/24 MongoDB