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+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python常用模块用法分析
2014/09/08 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
keras中的backend.clip用法
2020/05/22 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
标记环介质访问控制协议
2016/03/27 面试题
学校爱国卫生月活动总结
2014/06/25 职场文书
新闻通讯稿模板
2015/07/22 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
八年级作文之感恩
2019/11/22 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL