javascript之querySelector和querySelectorAll使用介绍

一开始很多人都会拿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> <div> <h4>h4 inside 1</h4> <h4>h4 inside 2</h4> <ul> <li>list item one</li> <li>list item two</li> <li>list itme three</li> </ul> </div> <div> <h4>h4 outside 1</h4> <h4>h4 outside 2</h4> </div> <div></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的)。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjjgx.html