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 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
详解vue中v-for的key唯一性
May 15 Vue.js
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
JAVA/JSP学习系列之七
2006/10/09 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
js实现抽奖效果
2017/03/27 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python操作串口的方法
2015/06/17 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python实现最短路径的实例方法
2020/07/19 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
留学经费担保书
2014/05/12 职场文书
分公司任命书
2014/06/06 职场文书
拾金不昧感谢信
2015/01/21 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
详解Python requests模块
2021/06/21 Python