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 相关文章推荐
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
通过JS判断网页是否为手机打开
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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
浅谈微信小程序flex布局基础
2018/09/10 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
python3中set(集合)的语法总结分享
2017/03/24 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
面试后的英文感谢信
2014/02/01 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
护士个人年度总结范文
2015/02/13 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
出生证明格式
2015/06/15 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
python 实现定时任务的四种方式
2021/04/01 Python