html选择器selector,HTML5中类jQuery选择器querySelector的高级使用

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

querySelectorAll支持属性操作 这个用也比较多

<div id="box" >

<ul>

<li data-href='http://www.qq.com'>tagname 111li>

<li class="surfaces">这是clase 222li>

<li class="surfaces">这是class 333li>

<li class="surfaces" data-href='http://www.baidu.com'>这是class 444li>

ul>

div>

document.getElementByIdx_x("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 111li>

<li class="surfaces">这是clase 222li>

<li class="surfaces">这是class 333li>

<li class="surfaces">这是class 444li>

ul>

div>

先看看 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();

});

上张图 看看控制台的结果

然后我们再看看 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();

});

看看控制台的结果

根据上面的用法 我们可以 看看这种写法

var fromId = document.getElementByIdx_x.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

写法没啥大问题，但是不推荐；还不如以下的 老老实实的，性能又好；

var doc=document;

var box=doc.getElementById("box");

var li=box.getElementsByTagName_r("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);

});

http://www.cnblogs.com/surfaces/

关于bind的其他用法， bind()与call(),apply()用法

类似，都是改变当前的this指针 。这里不在阐述只示范一下；具体赶紧百度；

document.getElementByIdx_x("box").addEventListener("click",function(){

var self=this; //缓存 this 对象

setTimeout(function(){

self.style.borderColor='red';

},500)

},false);

document.getElementByIdx_x("box").addEventListener("click",function(){

setTimeout(function(){

this.style.borderColor='red';

}.bind(this), 500); //通过bind 传入 this

},false);

另外一种事件绑定方法，不在阐述；

//以下是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);

我们根据这个结合bind 一起使用

//我们将绑定事件在 完善一下

Element.prototype.on = Element.prototype.addEventListener;

document.getElementByIdx_x("box").on("click",function(){ //on 类似于与jQuery

setTimeout(function(){

this.style.borderColor='blue';

console.log('on事件 边框变蓝色');

}.bind(this), 500); //通过bind 传入 this

});

关于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);

}

};