无为清净楼资源网 Design By www.qnjia.com
一开始很多人都会拿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的)。
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 陈慧娴.1989-永远是你的朋友(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 何洛洛.2024-别叫醒我(EP)【光羽】【FLAC分轨】
- 林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE】
- 黄妃.2005-红【亚律】【WAV+CUE】
- 刘美麟《同生》[FLAC/分轨][161.95MB]
- 群星《前途海量 电影原声专辑》[320K/MP3][106.26MB]
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】