前面的话

　　尽管DOM作为API已经非常完善了，但是为了实现更多的功能，DOM仍然进行了扩展，其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞，很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方法，通过CSS选择符查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。本文将详细介绍html5新增的3种selector方法

方法

querySelector()

　　querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。该方法既可用于文档document类型，也可用于元素element类型。关于CSS选择器的详细内容移步至此

　　[注意]IE7-浏览器不支持

<body style="height: 100%;">

<div class="box" id="box" style="height: 200px;">

<ul class="list" style="height:100px">

        <li class="in" style="height: 30px;">1</li>

        <li class="in" style="height: 30px;" title="test">2</li>

        <li class="in" style="height: 30px;">3</li>

    </ul>

</div>

<script>

//因为没有.null类名，所以返回null

var oNull = document.querySelector('.null');

console.log(oNull);//null

//通过<body>标签取得元素

var body = document.querySelector("body");

console.log(body.style.height);//100%

//通过id属性取得元素

var oBox = document.querySelector('#box');

console.log(oBox.style.height);//200px

//通过结合元素的类选择器取得元素

var oList = document.querySelector('ul.list');

console.log(oList.style.height);//100px

//通过类名取得元素

var oIn = document.querySelector('.in');

console.log(oIn.innerHTML);//1

//通过属性选择器取得元素

var oTest = body.querySelector('[title="test"]');

console.log(oTest.innerHTML);//2

</script>

</body>

querySelectorAll()

　　querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素

　　没有匹配元素时，返回空的类数组对象，而不是null

　　[注意]IE7-浏览器不支持

<body style="height: 100%;">

<div class="box" id="box" style="height: 200px;">

<ul class="list" style="height:100px">

        <li class="in" style="height: 30px;">1</li>

        <li class="in" style="height: 30px;" title="test">2</li>

        <li class="in" style="height: 30px;">3</li>

    </ul>

</div>

<script>

//返回[]

var oNull = document.querySelectorAll('.null');

console.log(oNull);

//取得body元素

var body = document.querySelectorAll("body")[0];

console.log(body.style.height);//100%

//取得所有class为"in"的元素

var oIn = document.querySelectorAll('.in');

for(var i = 0 ; i < oIn.length; i++){

    console.log(oIn[i].innerHTML);//1,2,3

}

//取得title属性为test的元素

var oTest = body.querySelectorAll('[title="test"]');

console.log(oTest);//[li.in]

</script>

</body>

matchesSelector()

　　matchesSelector()方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false

　　[注意]一般地，使用matches()方法来替代matchesSelector()方法

<body id="test">

<script>

    //Uncaught TypeError: document.body.matchesSelector is not a function

    console.log(document.body.matchesSelector('#test'));

</script>

</body>

　　由于兼容性问题，现在各个浏览器都只支持加前缀的方法。IE9+浏览器支持msMatchesSelector()方法，firefox支持mozMatchesSelector()方法，safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

function matchesSelector(element,selector){

    if(element.matchesSelector){

        return element.matchesSelector(selector);

    }

    if(element.msMatchesSelector){

        return element.msMatchesSelector(selector);

    }

    if(element.mozMatchesSelector){

        return element.mozMatchesSelector(selector);

    }

    if(element.webkitMatchesSelector){

        return element.webkitMatchesSelector(selector);

    }

}
<body id="test">

<script>

console.log(matchesSelector(document.body,'#test'));//true

</script>

</body>

非实时

　　与getElementById()和getElementsByTagName()方法不同，querySelector()和querySelectorAll()方法得到的类数组对象是非动态实时的

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

var divOne = container.querySelector('div:last-child');

var divAll = container.querySelectorAll('div');

console.log(container.children.length);//2

console.log(divOne.innerHTML);//2

console.log(divAll.length);//2

var newDiv = document.createElement('div');

newDiv.innerHTML = 3;

container.appendChild(newDiv);

console.log(container.children.length);//3

//由于querySelector不是实时的，所以其保存的仍然是原来第二个div的值

console.log(divOne.innerHTML);//2

//由于querySelectorAll不是实时的，所以仍然只保存了两个div元素

console.log(divAll.length);//2

console.log(container.querySelector('div:last-child').innerHTML);//3

console.log(container.querySelectorAll('div').length);//3

</script>

缺陷

　　selector类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

console.log(container.querySelectorAll('div div'));//[div div]

</script>

　　按照正常理解，控制台应该返回空的类数组对象，因为id为container的div元素的子元素中，不存在div元素嵌套的情况

　　但是，该方法实际返回[div div]。这是因为参数中的选择器包含了元素的祖先

　　所以，如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器

<div id="container">

    <div>1</div>

    <div>2</div>

</div>

<script>

var container = document.getElementById('container');

console.log(container.querySelectorAll('#container div div'));//[]

console.log(container.querySelectorAll('#container div'));//[div div]

console.log(container.querySelectorAll('div'));//[div div]

</script>

最后

　　虽然存在着非实时和参数缺陷的问题，但是瑕不掩瑜，selector类方法的出现极大地简化了查找元素的繁琐操作。而且，它们支持IE8浏览器

　　javascript选择器API系列写完了，欢迎交流

深入理解javascript选择器API系列第三篇——h5新增的3种selector方法的更多相关文章

  1. 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  2. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  3. 深入理解javascript选择器API系列第二篇——getElementsByClassName

    × 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...

  4. 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖

    前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...

  5. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  6. 深入理解DOM事件类型系列第三篇——变动事件

    × 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...

  7. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  8. 深入理解脚本化CSS系列第三篇——脚本化CSS类

    前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...

  9. 深入理解javascript函数进阶系列第四篇——惰性函数

    前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...

随机推荐

  1. mysql 赋予用户权限

    # 赋予权限MySQL> grant 权限参数 on 数据库名称.表名称 to 用户名@用户地址 identified by '用户密码'; # 立即生效权限MySQL> flush pr ...

  2. 聊聊从web session的共享到可扩展缓存设计

    先从web session的共享说起   许多系统需要提供7*24小时服务,这类系统肯定需要考虑灾备问题,单台服务器如果宕机可能无法立马恢复使用,这必定影响到服务.这个问题对于系统规模来说,从小到大可 ...

  3. mono3.2.3+Jexus5.5+openSuSE13.1的asp.net

    读书的时候,我似乎有系统地学习过asp.net,但是基本已经还掉了...工作之后有做过一个内部用的网站,但也没有正式使用,的确只能算是个课程设计型的东西,不能做产品.后来工作需求是做Win8下的APP ...

  4. AngularJS实例实战

    学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...

  5. 玩转Windows服务系列——给Windows服务添加COM接口

    当我们运行一个Windows服务的时候,一般情况下,我们会选择以非窗口或者非控制台的方式运行,这样,它就只是一个后台程序,没有界面供我们进行交互. 那么当我们想与Windows服务进行实时交互的时候, ...

  6. Azure 上通过 SendGrid 发送邮件

    SendGrid 是什么? SendGrid 是架构在云端的电子邮件服务,它能提供基于事务的可靠的电子邮件传递. 并且具有可扩充性和实时分析的能力.常见的用例有: 自动回复用户的邮件 定期发送信息给用 ...

  7. 设计模式之合成/聚合利用原则（CARP）

    一.概念 CARP:CompositionAggregation Principle 合成聚合复用原则,尽量使用合成/聚合,尽量不使用类继承.合成聚合是“has  a”的关系,而继承是“is  a”的 ...

  8. python多行字符串

    Python中如何处理长代码格式化问题,如何提高格式化输出的长字符串的可读性? 当我们需要格式化输出一个很长的字符串的时候,都写在一行显得很难看,而且可读性也很差:当我们使用链式的语法写代码的时候常常 ...

  9. Java环境变量-Linux环境

    环境变量说明 JAVA_HOME 它指向jdk的安装目录,Eclipse/NetBeans/Tomcat等软件就是通过搜索JAVA_HOME变量来找到并使用安装好的jdk. PATH 作用是指定命令搜 ...

  10. 修改Coney主题之侧边栏移位

    title: 修改Coney主题之侧边栏移位 date: 2014-12-15 18:09:54 categories: Hexo tags: [hexo,css] --- Coney是一个非常漂亮的 ...