基本用法

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

  

HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);的更多相关文章

  1. HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  2. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

  3. 第87天:HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  4. JQuery选择器转义说明

    JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 ...

  5. html5 中高级选择器 querySelector

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  6. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  7. 高级选择器querySelector和querySelectorAll

    Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...

  8. javascript高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  9. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

随机推荐

  1. 让CentOS系统时间同步

    CentOS系统时间同步的步骤如下: 新装的CentOS系统服务器可能设置了错误的,需要调整时区并调整时间. 如下是CentOS系统使用NTP来从一个时间服务器同步cp /usr/share/zone ...

  2. javaEE jdbc编程步骤

    1.载入数据库驱动(jar文件) //须要下载一个数据库的jar包,并导入对应的JDBC项目中,创建路径! Class.forName("com.mysql.jdbc.Driver" ...

  3. C#属性总结

    1.私有字段和公有字段的比较 类中的私有字段只能在类的内部访问,而对类的公有字段的访问却不受限制. 在以前,为了封装,程序中会尽量少使用公有字段,因为使用公有字段的话,会让程序失去控制权.所以程序中会 ...

  4. STL源代码分析——STL算法remove删除算法

    前言 因为在前文的<STL算法剖析>中,源代码剖析许多.不方便学习,也不方便以后复习,这里把这些算法进行归类.对他们单独的源代码剖析进行解说.本文介绍的STL算法中的remove删除算法. ...

  5. WPF MediaElement播放器2

    在此问个问题,MediaElement播放本地和http上的视频没问题,但是ftp的怎么在本例中播放不了 若高手了解,请不吝赐教 using System; using System.Collecti ...

  6. ArrayList实现借壳

    随着Collections工具: import java.util.ArrayList; import java.util.Collections; public class TTEST { publ ...

  7. django 带參数的 url

    url就像筋络一样把django这个大框架的各个部分紧紧的连接成一个总体,所以要了解django从url開始是一个不错的方向. 一般的view template url的关系这里就不讲了,以下会具体介 ...

  8. 在WPF中使用PlaneProjection模拟动态3D效果

    原文:在WPF中使用PlaneProjection模拟动态3D效果 虽然在WPF中也集成了3D呈现的功能,在简单的3D应用中,有时候并不需要真实光影的3D场景.毕竟使用3D引擎会消耗很多资源,有时候使 ...

  9. Android自带样式

    Android系统自带样式: android:theme="@android:style/Theme.Dialog" 将一个Activity显示为对话框模式 android:the ...

  10. PhoneGap 开发与应用 上传 App Store 在

    几个简单的归纳过程,前提是你有一个开发者账户,而且必须有Mac 虚拟机或真机.尽管WIndows 也可以上载证书.但最终也必须用于上传应用程序 Xcode 要么  Application Loader ...