HTML5中类jQuery选择器querySelector的高级使用
来源：open开发经验库
来自： 
var elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的d&div id="box"&
//surface blog 
querySelectorAll支持属性操作 这个用也比较多
&div id="box" &
data-href=''&tagname 111&/li&
&li class="surfaces"&这是clase
222&/li&
&li class="surfaces"&这是class 333&/li&
&li class="surfaces"
data-href=''&这是class 444&/li&
&/ul&
&/div& 
document.getElementById("box").addEventListener("click",function(){
attr=document.querySelectorAll('[data-href]');
console.log(attr);
},!1); 
移动端dom操作 ，其实只要 getElementById(id),
querySelector 和querySelectorAll 已经能够满足大部分的需求了；
先附上相关 html
/surfaces/
&div id="box"&
&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); //// 第一个
console.log('query'+query_tagname.innerHTML); //// 第一个
query_id.addEventListener('click',function(){ 
console.log('click_query_id'+this.innerHTML);
//'click surfaces 2222
query_class.addEventListener('click',function(){
var e=e||window. 
console.log('click_query_class'+this.innerHTML);
//'click surfaces 2222
e.stopPropagation();
query_tagname.addEventListener('click',function(e){ 
var e=e||window.
console.log('click_query_tagname'+this.innerHTML);
//'click surfaces 2222
e.stopPropagation();
上张图 看看控制台的结果
然后我们再看看 queryAelectorAll的高级用法
var $=queryAll = document.querySelectorAll.bind(document);
//集合 个人感觉最犀利
surfaces 
var $id=$('#box');
var $class=$('.lione');
//class
var $tagname=$('li');
//tagName 
跑一下这段代码看看
var $id=$('#box');
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.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 
写法没啥大问题，但是不推荐；还不如以下的 老老实实的，性能又好；
var doc=
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);
/surfaces/
关于bind的其他用法， bind()与call(),apply()用法 类似，都是改变当前的this指针 。这里不在阐述只示范一下；具体赶紧百度； 
document.getElementById("box").addEventListener("click",function(){
//缓存 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已经想出来的一些东西：
//i-know-jquery-now-what#backToTheFutureToday-heading
var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventL
$('#somelink')[0].on('touchstart', handleTouch); 
我们根据这个结合bind 一起使用
//我们将绑定事件在 完善一下
Element.prototype.on = Element.prototype.addEventL
document.getElementById("box").on("click",function(){
类似于与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 =
return function (args) {
if (!(args instanceof Array)) {
args = [args];
self.apply(target, args);
扩展阅读：
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动后使用快捷导航没有帐号？
查看: 1511|回复: 0
querySelectorAll()和querySelector()简单介绍
本帖最后由 antzone 于
17:06 编辑
querySelectorAll()和querySelector()简单介绍:
大家知道css选择器非常的强大，可以进行各种匹配，jQuery的选择器同样非常的强大，但是原生的javascript如果要获取DOM元素则要困难的多，仅仅提供了有效的方法，例如:
[JavaScript] 纯文本查看 复制代码运行代码document.getElementById();
element.getElementsByTagName();
当然还有其他的，不过还是远远不能够满足实际的应用需要，如果要灵活多变的获取DOM元素，往往需要些写大段的代码。在这种情况下querySelectorAll()函数和querySelector()函数应运而生。
一.querySelector()函数:
此函数可以接受一个字符串参数，参数值就是CSS选择器，例如:
[JavaScript] 纯文本查看 复制代码运行代码document.querySelector(&#mydiv&)
以上代码可以获取id属性值为mydiv对象元素，当然这个可以用document.getElementById()替代，下面是一个无法替代的:
[JavaScript] 纯文本查看 复制代码运行代码document.querySelector(&.thediv ul&)
此函数可以获取class属性值为thediv下的第一个ul元素对象。
特别注意:此函数获取的是返回指定元素节点的子元素中，第一个匹配selector的元素，如果没有匹配，返回null。
二.querySelectorAll()函数:
此函数和querySelector()函数类似，但是有一个很大的不同点就是一个，它获取的是一个元素对象集合，而querySelector()函数只是返回第一个匹配的对象。
三.浏览器兼容性问题:
IE7以上（不包括IE7）和其他标准浏览器都支持这两个函数，尤其是当对象是document的是更是如此，例如:
[JavaScript] 纯文本查看 复制代码运行代码var element=document.querySelector(selectors);
var elementList=document.querySelectorAll(selectors);
以上代码在没有任何问题，函数的调用对象不是document的时候就出现奇怪的现象，代码如下:
[JavaScript] 纯文本查看 复制代码运行代码
&div id=&box& class=&box&&
&&&ul class=&theul&&
& & &li&蚂蚁部落欢迎您&/li&
& & &li&每一天都是新的&/li&
&script type=&text/javascript&&& &
var box=document.getElementById(&box&);
var element=box.querySelector(&.box li&);
var elementList=box.querySelectorAll(&.box li&);
按照W3C标准的本意，以上代码是要获得box下面的class属性值为box元素下的第一个li元素对象和li元素集合，并且按照标准来说返回值应该是null和[]，但是实际上返回值却并非如此，好像调用对象仍然是document。应该在以后的浏览器能够解决此问题，不过当下可以运用其他的思路以避免此问题，主要原理就是在选择中，使用一个id选择器进行限定即可，代码如下:
[JavaScript] 纯文本查看 复制代码运行代码
function $(id){
&&return document.getElementById(id);
var d1 = $('d1');
var obj1 = d1.querySelector('div a');
var obj2 = d1.querySelectorAll('div a');
var old = d1.id, id = d1.id = &__sizzle__&;
&&var query = '#' + id + ' div a';
&&console.log(d1.querySelector( query ));
&&console.log(d1.querySelectorAll( query ).length);
catch(e) {}
&&old ? d1.id = old : d1.removeAttribute( &id& );
以上代价是对jQuery源码的一个修改，足以演示此种思路。
Powered by
Copyright &JavaScript 参考手册
HTML DOM querySelector() 方法
修改 id="demo" 的
&div&元素的第一个子元素文本内容：
var x = document.getElementById("myDIV");x.querySelector("#demo").innerHTML
= "Hello World!";
定义与用法
querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。
querySelector() 方法只返回匹配指定选择器的第一个元素。如果你要返回所有匹配元素，请使用
querySelectorAll() 方法替代。
对于更多的 CSS 选择，可以访问我们的
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
querySelector()
element.querySelector(CSS 选择器)
CSS 选择器
必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器，使用逗号隔开，返回一个匹配的元素。
更多 CSS 选择器，请参阅我们的 。
Selectors Level 1 Element Object
匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。
修改 &div& 元素中的第一个 &p& 元素内容：
var x = document.getElementById("myDIV");x.querySelector("p").innerHTML
= "Hello World!";
修改 &div& 元素中第一个 class="example" 的子元素内容：
var x = document.getElementById("myDIV");x.querySelector(".example").innerHTML
= "Hello World!";
修改 &div& 元素中第一个 class="example"
的 &p& 元素：
var x = document.getElementById("myDIV");x.querySelector("p.example").innerHTML
= "Hello World!";
为 &div& 元素中的第一个有 target 属性的 &a& 元素添加红色边框：
var x = document.getElementById("myDIV");x.querySelector("a[target]").style.border
= "10px solid red";
以下实例演示了多个选择器的使用方法。
假定你选择了两个选择器: &h2& 和 &h3& 元素。
以下代码将为 &div& 元素的第一个 &h2& 元素添加背景颜色：
&div id="myDIV"&&
&h2&A h2 element&/h2&& &h3&A h3 element&/h3&
&/div&var x = document.getElementById("myDIV");x.querySelector("h2,
h3").style.backgroundColor = "red";
但是，如果 &div& 元素中 &h3& 元素位于 &h2& 元素之前，&h3& 元素将会被设置指定的背景颜色。
&div id="myDIV"&&
&h3&A h3 element&/h3&& &h2&A h2 element&/h2&
&/div&var x = document.getElementById("myDIV");x.querySelector("h2,
h3").style.backgroundColor = "red";
JavaScript 参考手册:
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码