Maison  >  Article  >  interface Web  >  javascript之querySelector和querySelectorAll使用说明_javascript技巧

javascript之querySelector和querySelectorAll使用说明_javascript技巧

WBOY
WBOYoriginal
2016-05-16 18:01:191624parcourir

一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时。

下面是我的jsFiddle示例,我就以此展开说明:

复制代码 代码如下:

(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('

' + comment + '

');
},

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 logger.append(items[i].innerHTML);
}

logger.flush();
})();

误解就在于对$('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的)。
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn