一些HTML5的东西（DOM相关）

 嘛，不懂JQ，也不是很想学……老老实实原生JS好了，已经会用的东西才贴……

 

一、getElementsByClassName，HTML5的新玩意

总之……和之前的getElementsByTagName用法差不多，这下方便了不少

<div class="bb">as</div> <div class="bb">as</div> <div id="aa"> <div class="bb">as</div> </div> <mce:script type="text/javascript"><!-- alert(document.getElementsByClassName("bb").length); alert(document.getElementById("aa").getElementsByClassName("bb").length); // --></mce:script>

结果是3和1

 

 

 

二、HTMLElement重写

这个其实不是HTML5的东西，FF和Chrome之类早就实现，但IE到了IE9终于也支持了，饿的神……

<div class="bb">as</div> <div class="bb">as</div> <div id="aa"> <div class="bb">as</div> <div>as</div> </div> <mce:script type="text/javascript"><!-- function $I(a){return document.getElementById(a) || null;} function $N(a){return document.getElementsByName(a) || null;} function $T(a){return document.getElementsByTagName(a) || null;} function $C(a){return document.getElementsByClassName(a) || null;} HTMLElement.prototype.$T=function(a){return this.getElementsByTagName(a) || null;}; HTMLElement.prototype.$C=function(a){return this.getElementsByClassName(a) || null;}; alert($C("bb").length); alert($I("aa").$C("bb").length); alert($I("aa").$T("div").length); // --></mce:script>

于是结果就是3，1，2

  

三、querySelectorAll和querySelector 

不懂JQ，所以对JQ的用法不是很了解……没咋看到用法，然后自己试用了一下而已。

简单的用法……

 

关于querySelectorAll，它返回的是一个集合

<div class="aa"> <div class="bb">a</div> <div class="bb" id="bbb">b</div> </div> <div class="bb">c</div> <script type="text/javascript"> var z; z = document.querySelectorAll("#bbb"); alert(z.innerHTML); // 将得到undefined z = document.querySelectorAll("#bbb")[0]; alert(z.innerHTML); // 得到b，即使是ID，它返回的也是数组 z = document.querySelectorAll(".bb"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 得到a, b, c此时用法与getElementsByClassName没啥区别 z = document.querySelectorAll("div"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 同样，用法与getElementsByTagName没啥区别，返回的是各个div的innerHTML z = document.querySelectorAll(".aa")[0]; for (var i=0; i<z.querySelectorAll(".bb").length; i++){ alert(z.querySelectorAll(".bb")[i].innerHTML); } // 返回的是a,b，也就是说，一样可以返回某一指定元素下的子元素 </script>

 

querySelector则用来选取某一指定的元素

  <div class="aa"> <div class="bb">a</div> <div class="bb" id="bbb">b</div> </div> <div class="bb">c</div> <mce:script type="text/javascript"><!-- var z; z = document.querySelector("#bbb"); alert(z.innerHTML); // 与document.querySelectorAll("#bbb")不同，它返回的是指定一个元素，此时它用法与getElementById一样 z = document.querySelector(".bb"); alert(z.innerHTML); // 返回的是a，即，它只返回第一个符合条件的结果，此时效果与getElementsByClassName("bb")[0]是一样的 z = document.querySelector("div"); alert(z.innerHTML); // 同样，此时效果与getElementsByTagName("div")[0]是一样的 // --></mce:script>

 

以上是基础用法……其实和直接用getElementById，getElementsByTagName，getElementsByClassName一样，效率有点小不同。

参考这个页面http://jsperf.com/queryselectorall2

一般都是getElementById最快，但opera中反而是querySelectorAll最快，safari是getElementsByClassName最快

 

querySelectorAll、querySelector用法还不仅限这么简单

<div class="aa"> <div class="bb">a</div> <div class="bb" id="bbb">b</div> <div class="bb">c</div> <div class="bb">d</div> <div class="bb">e</div> <div class="bb">f</div> <div class="bb">g</div> </div> <p class="aa"> pp </p> <p class="cc"> cc </p> <div class="bb">c</div> <mce:script type="text/javascript"><!-- var z; z = document.querySelectorAll("p.aa")[0]; alert(z.innerHTML); // 返回的是pp，它只选择样式为aa的p元素，而不理会同样式的div z = document.querySelectorAll("div.aa>div")[0]; alert(z.innerHTML); // 返回的是a，它返回的是样式为aa的div元素下的第一个div里的东西 z = document.querySelectorAll("div.aa>.bb")[0]; // alert(z.innerHTML); // 返回的是a，返回的是样式为aa的div元素下第一个样式为bb的东西 z = document.querySelectorAll(".aa,.cc"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 返回的是class为aa还有cc的集合 z = document.querySelectorAll(".aa div:nth-child(1)")[0]; alert(z.innerHTML); // 返回的是b // :nth-child是CSS3的伪类，可以参考http://blog.guitarbean.com/2008/08/css3-nth-child-pseudo-class-selector.html // :nth-child(1)表示第2个元素 z = document.querySelectorAll(".aa div:nth-child(2n)"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 返回的是b,d,f // :nth-child(2n)表示为2的倍数 z = document.querySelectorAll(".aa div:nth-child(2n-1)"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 返回的是a,c,e,g // :nth-child(2n-1)表示为2的倍数-1 z = document.querySelectorAll(".aa div:nth-child(odd)"); for (var i=0; i<z.length; i++){ alert(z[i].innerHTML); } // 返回的是a,c,e,g，odd为奇数倍，与2n-1一样 // 如果是偶数，可以用even表示 // --></mce:script>