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 相关文章推荐
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
node网页分段渲染详解
Sep 05 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
Vuex提升学习篇
Jan 11 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
js继承的实现代码
2010/08/05 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
javascript实现下雨效果
2017/03/27 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python下10个简单实例代码
2017/11/15 Python
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
2014年毕业演讲稿范文
2014/05/13 职场文书
社区工作者演讲稿
2014/05/23 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
市场营销工作计划书
2014/09/15 职场文书
优秀党员申报材料
2014/12/18 职场文书
检讨书范文2000字
2015/01/28 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL