HTML5中類jQuery選擇器querySelector的高級使用

var elements = document.querySelectorAll('div.foo');//返回所有帶foo類樣式的d<div id="box">   //surface blog

querySelectorAll支持屬性操作 這個用也比較多

<div id="box" >
      <ul>
        <li   data->tagname 111</li>
        <li class="surfaces">這是clase  222</li>
        <li class="surfaces">這是class 333</li>
        <li class="surfaces"  data->這是class 444</li>
     </ul>

</div>

document.getElementById("box").addEventListener("click",function(){
    var  attr=document.querySelectorAll('[data-href]');
         console.log(attr);
},!1);

移動端dom操作 ，其實只要 getElementById(id),   querySelector 和querySelectorAll 已經能夠滿足大部分的需求了；

高級用法  

先附上相關 html                 http://www.cnblogs.com/surfaces/

<div id="box">
      <ul>
        <li >tagname 111</li>
        <li class="surfaces">這是clase  222</li>
        <li class="surfaces">這是class 333</li>
        <li class="surfaces">這是class 444</li>
     </ul>

</div></pre> 
 
先看看 querySelector的高級應用

 var query = document.querySelector.bind(document); //單個的 
var query_id=query('#box');    //dom id
var query_class=query('.surfaces');   // dom class
var query_tagname=query('li')    //dom 標簽
 
 
獲取看到這里，你會懷疑 這都可以，我們跑一下代碼看看 結果

console.log('query'+query_id.innerHTML);  //

console.log('query'+query_class.innerHTML); //// 第一個  222
console.log('query'+query_tagname.innerHTML); //// 第一個  222

query_id.addEventListener('click',function(){

    console.log('click_query_id'+this.innerHTML);  //'click surfaces 2222
}); 
query_class.addEventListener('click',function(){
    var e=e||window.event;

    console.log('click_query_class'+this.innerHTML);  //'click surfaces 2222
    e.stopPropagation();
});
query_tagname.addEventListener('click',function(e){ 
   var e=e||window.event;
    console.log('click_query_tagname'+this.innerHTML);  //'click surfaces 2222
    e.stopPropagation();
});</pre> 
 
上張圖 看看控制臺的結果

  
然后我們再看看 queryAelectorAll的高級用法
 var $=queryAll = document.querySelectorAll.bind(document);  //集合 個人感覺最犀利   surfaces 
var $id=$('#box');    //id
var $class=$('.lione');  //class
var $tagname=$('li');   //tagName
 
 
跑一下這段代碼看看

var $id=$('#box');    //id
var $class=$('.surfaces');  //class
var $tagname=$('li');   //tagName

console.log('queryAll'+$id[0].innerHTML);
console.log('queryAll'+$class[0].innerHTML); //222
console.log('queryAll'+$tagname[0].innerHTML);//111
$id[0].addEventListener('click',function(){ 
    console.log('click_queryAll'+this.innerHTML);  //'click surfaces 2222
});
$class[0].addEventListener('click',function(e){ 
    console.log('click_$class'+this.innerHTML);  //'click surfaces 2222
    e.stopPropagation();
});
$tagname[0].addEventListener('click',function(e){

    console.log('click_$tagname'+this.innerHTML);  //'click surfaces 2222
    e.stopPropagation();
});</pre> 
 
看看控制臺的結果

  
根據上面的用法 我們可以 看看這種寫法
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);
 
 
var fromId_box=fromId('box');

var fromClass_surfaces=fromClass('surfaces');

var fromTag_li=fromTag('li');

console.log('fromId'+fromId_box.innerHTML);
console.log('fromClass'+fromClass_surfaces[0].innerHTML); //222
console.log('fromTag'+fromTag_li[0].innerHTML);//111</pre> 
 
  

寫法沒啥大問題，但是不推薦；還不如以下的 老老實實的，性能又好；
var doc=document;
var box=doc.getElementById("box");
var li=box.getElementsByTagName("li");
var surfaces=box.getElementsByClassName("surfaces");
 
 
 另外；我們梳理下基于 querySelectorAll的事件綁定 ，從 Array.prototype中剽竊了 forEach 方法來完成遍歷 

Array.prototype.forEach.call(document.querySelectorAll('.surfaces'), function(el){
    el.addEventListener('click', someFunction);
});

//通過 bind()  遍歷DOM節點的函數。。
var unboundForEach = Array.prototype.forEach,
    forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('.surfaces'), function (el) {
    el.addEventListener('click', someFunction);
});</pre> 
 
http://www.cnblogs.com/surfaces/

 關于bind的其他用法， bind()與call(),apply()用法 類似，都是改變當前的this指針 。這里不在闡述只示范一下；具體趕緊百度； 
document.getElementById("box").addEventListener("click",function(){
    var self=this;  //緩存 this 對象
    setTimeout(function(){
        self.style.borderColor='red';
        },500)
    },false);

document.getElementById("box").addEventListener("click",function(){
    setTimeout(function(){
     this.style.borderColor='red';
    }.bind(this), 500); //通過bind 傳入 this 
},false);</pre> 
 
  

另外一種事件綁定方法，不在闡述；
//以下是Andrew Lunny已經想出來的一些東西：  https://remysharp.com/2013/04/19/i-know-jquery-now-what#backToTheFutureToday-heading
var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;

$('#somelink')[0].on('touchstart', handleTouch);</pre> 
 
我們根據這個結合bind 一起使用

//我們將綁定事件在 完善一下
Element.prototype.on = Element.prototype.addEventListener;

document.getElementById("box").on("click",function(){  //on  類似于與jQuery
    setTimeout(function(){
     this.style.borderColor='blue';
     console.log('on事件 邊框變藍色');
    }.bind(this), 500); //通過bind 傳入 this
});</pre> 
 
  

關于bind兼容性 擴展；
Function.prototype.bind = Function.prototype.bind || function (target) {
  var self = this;
  return function (args) {
     if (!(args instanceof Array)) {
      args = [args];
     }
    self.apply(target, args);
  }
};
 
 
 擴展閱讀： 一起Polyfill系列：Function.prototype.bind的四個階段 
 </div>