DDR爱好者之家

javascript之querySelector和querySelectorAll使用介绍
站长资源 2025/3/14 佚名
55 1538
DDR爱好者之家 Design By 杰米

一开始很多人都会拿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的）。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米