<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head><meta forua="true" http-equiv="Cache-Control" content="max-age=0" /></head>
<card title="js原生查找DOM方法querySelector和querySelectorAll使用介绍" id="card1">
<p> 游客</p><p>
标题:js原生查找DOM方法querySelector和querySelectorAll使用介绍<br/>
正文:<br/>
一开始很多人都会拿jquery的选择器来跟这两个api做对比（我也是），比较异同本来没事，但却使一些同学对这两个api在浏览器中的实现产生了误解，特别是再dom element上调用此api时。 <br/>下面是我的jsFiddle示例，我就以此展开说明： <br/>js代码: <br/>代码如下:<br/>(function(global) { <br/>global.doc = document; <br/>global.body = doc.getElementsByTagName('body')[0]; <br/>global.$ = function(id) { <br/>return doc.getElementById(id); <br/>} <br/>global.Logger = function(id) { <br/>this.logElem = $(id); <br/>this.logArr = []; <br/>}; <br/>global.Logger.prototype = { <br/>constructor: global.logger, <br/>append: function(comment) { <br/>this.logArr.push('&amp;lt;p&amp;gt;' + comment + '&amp;lt;/p&amp;gt;'); <br/>}, <br/>flush: function() { <br/>this.logElem.innerHTML = this.logArr.join(''); <br/>}, <br/>clear: function() { <br/>this.logElem.innerHTML = ''; <br/>this.logArr = []; <br/>} <br/>}; <br/>})(this); <br/>(function() { <br/>var logger = new Logger('log'); <br/>var items = $('inner').querySelectorAll('#main h4.inside'); <br/>logger.append(items.length); <br/>for(var i = 0, len = items.length; i &amp;lt; len; i<br/><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1018&amp;Page=1">[&lt;&lt;]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1018&amp;Page=1">[[1]]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1018&amp;Page=2">[2]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1018&amp;Page=3">[3]</a><a href="http://camnpr.com/wap.asp?mode=WAP&amp;act=View&amp;id=1018&amp;Page=4">[&gt;&gt;]</a><br/>
<br/>
<a href="wap.asp?act=Com&amp;id=1018">查看评论(0)</a><br/>
<a href="wap.asp?act=AddCom&amp;inpId=1018">发表评论</a><br/><br/>

<br/>

<br/>
<a href="http://camnpr.com/wap.asp">首页</a>
</p>
</card>
</wml>