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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php实现文章评论系统
2019/02/18 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
JavaScript模块详解
2017/12/18 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
高一家长会邀请函
2014/01/12 职场文书
高中历史教学反思
2014/02/08 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
中学生思想品德评语
2014/12/31 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
单位实习介绍信
2015/05/05 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS