javascript之querySelector和querySelectorAll使用介绍


Posted in Javascript onDecember 20, 2011

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

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

html代码:

<div id="main"> 
<div id="inner"> 
<h4 class="inside">h4 inside 1</h4> 
<h4 class="inside">h4 inside 2</h4> 
<ul class="nodelist"> 
<li>list item one</li> 
<li>list item two</li> 
<li>list itme three</li> 
</ul> 
</div> 
<div id="outter"> 
<h4 class="outside">h4 outside 1</h4> 
<h4 class="outside">h4 outside 2</h4> 
</div> 
<div id="log"></div>

css代码:

#log { 
font-size: 10px; 
}

误解就在于对$('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 css float属性的特殊写法
Nov 13 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
js有关元素内容操作小结
Dec 20 #Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 #Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 #Javascript
js change,propertychange,input事件小议
Dec 20 #Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 #Javascript
Javascript面向对象设计一 工厂模式
Dec 20 #Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 #Javascript
You might like
php的字符串用法小结
2010/06/08 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php实现中文转数字
2016/02/18 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Python字符串替换实例分析
2015/05/11 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python如何查看网页代码
2020/06/07 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
四种会话跟踪技术
2015/05/20 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
毕业生实习鉴定
2013/12/11 职场文书
物业管理计划书
2014/01/10 职场文书
平面设计专业求职信
2014/08/09 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Redis批量生成数据的实现
2022/06/05 Redis