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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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
安装APACHE
2007/01/15 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
vuex的简单使用教程
2018/02/02 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
Python configparser模块常用方法解析
2020/05/22 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
J2EE面试题大全
2016/08/06 面试题
迎新晚会主持词
2014/03/24 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
运动会宣传稿100字
2015/07/23 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
js 数组 fill() 填充方法
2021/11/02 Javascript