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 相关文章推荐
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
Angular工具方法学习
Dec 26 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
微信小程序实现分页加载效果
Nov 19 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
967 个函式
2006/10/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
微信小程序自定义组件
2017/08/16 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python简单日志处理类分享
2015/02/14 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
文明礼仪小标兵事迹
2014/01/12 职场文书
索桥的故事教学反思
2014/02/06 职场文书
军训考核自我鉴定
2014/02/13 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
工作简报格式范文
2015/07/21 职场文书
《所见》教学反思
2016/02/23 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python