HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

2023-02-25 23:11:27

基本用法

querySelector

该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。 ----> querySelector得到一个DOM

var element = document.querySelector('#container');//返回id为container的dom

var element = document.querySelector('div#container');//返回id为container的首个div

var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

querySelectorAll

该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ----> querySelectorAll 得到一个伪数组 DOM

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 111</li>

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

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

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

     </ul>

</div>

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

	var  attr=document.querySelectorAll('[data-href]');

		 console.log(attr);

},!1);

移动端 getElementById(id), querySelector 和querySelectorAll 已经能够满足大部分dom操作需求了；

高级用法

先附上相关 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>

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

});

　　看看控制台的结果

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

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); //

console.log('fromTag'+fromTag_li[0].innerHTML);//

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

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

});

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

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

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

queryAll('#box')[0].on('click',function(){  //on 类似 jquery

//document.getElementById("box").on("click",function(){

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

  }

};

bind扩展阅读：一起Polyfill系列：Function.prototype.bind的四个阶段

总结一下：移动端dom操作，其实只要 getElementById(id), querySelector 和querySelectorAll 已经能够满足大部分的需求了；

document.querySelectorAll.bind(document);

document.querySelector.bind(document);

缺点：

并不适合那些相对复杂或者表单多的单页；也不适合简单项目的主页；如果多人协作，不利于维护；

上面的始终绑定的document，有时候不一定从document查找；没有content上下文；如document.querySelector("#box").querySelector('.surfaces'); 限定范围在id为box下的class surfaces；

看看 Remy Sharp封装的min.js ;值得学习思考这种思想；或许你觉得不好，一般般，或者不适合项目啊之类的；这边不是重点；重点是你就是想不到可以这样写，重点是看别人怎样写的，为什么可以这样写，优点是什么；

/*globals Node:true, NodeList:true*/

$ = (function (document, window, $) {

  // Node covers all elements, but also the document objects

  var node = Node.prototype,

      nodeList = NodeList.prototype,

      forEach = 'forEach',

      trigger = 'trigger',

      each = [][forEach],

      // note: createElement requires a string in Firefox

      dummy = document.createElement('i');

  nodeList[forEach] = each;

  // we have to explicitly add a window.on as it's not included

  // in the Node object.

  window.on = node.on = function (event, fn) {

    this.addEventListener(event, fn, false);

    // allow for chaining

    return this;

  };

  nodeList.on = function (event, fn) {

    this[forEach](function (el) {

      el.on(event, fn);

    });

    return this;

  };

  // we save a few bytes (but none really in compression)

  // by using [trigger] - really it's for consistency in the

  // source code.

  window[trigger] = node[trigger] = function (type, data) {

    // construct an HTML event. This could have

    // been a real custom event

    var event = document.createEvent('HTMLEvents');

    event.initEvent(type, true, true);

    event.data = data || {};

    event.eventName = type;

    event.target = this;

    this.dispatchEvent(event);

    return this;

  };

  nodeList[trigger] = function (event) {

    this[forEach](function (el) {

      el[trigger](event);

    });

    return this;

  };

  $ = function (s) {

    // querySelectorAll requires a string with a length

    // otherwise it throws an exception

    var r = document.querySelectorAll(s || '☺'),

        length = r.length;

    // if we have a single element, just return that.

    // if there's no matched elements, return a nodeList to chain from

    // else return the NodeList collection from qSA

    return length == 1 ? r[0] : r;

  };

  // $.on and $.trigger allow for pub/sub type global

  // custom events.

  $.on = node.on.bind(dummy);

  $[trigger] = node[trigger].bind(dummy);

  return $;

})(document, this);

码农公寓