在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一个元素要比以上方法容易得多。querySelector 和 querySelectorAll 方法是W3C Selectors API规范中定义的。他们的作用是根据 CSS 选择器规范,使用和jquery查询方式一样,便捷定位文档中指定元素。随着现在浏览器的发展,目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

  大家肯定会觉得‘哎呀,这个方法好,可是它性能好吗?为什么我没见人常用这个选择器呢?’。当然,querySelector的性能是不如getElementById的,这也是它的一个缺陷吧。

总结:

  • 得到的元素不是需要很麻烦的多次getElementBy..的话,尽量使用getElementBy..,因为他快些。
  • 得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector,方便。
  • 看实际情况,你决定方便优先还是性能优先

参考文件:http://waitstone.sinaapp.com/?p=278

     http://www.nowamagic.net/librarys/veda/detail/388

     http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html 予以为这位大哥写得真的是很棒很棒的

关于一个新的DOM选择器querySelector的更多相关文章

  1. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  2. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  3. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  4. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  6. 强大DOM选择器querySelector

    今天碰到问题,用了下不经常用的querySelector还不错 querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对 ...

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

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

  8. 订制DOM选择器

    本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...

  9. html5 中高级选择器 querySelector

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

随机推荐

  1. PHP filesystem attack vectors - Take Two

    http://www.ush.it/2009/07/26/php-filesystem-attack-vectors-take-two/ Did you enjoyed our previous &q ...

  2. 字典树(Trie Tree)

    在图示中,键标注在节点中,值标注在节点之下.每一个完整的英文单词对应一个特定的整数.Trie 可以看作是一个确定有限状态自动机,尽管边上的符号一般是隐含在分支的顺序中的.键不需要被显式地保存在节点中. ...

  3. firebox httprequester 模拟请求

    获取下载插件 httprequester 模拟POST请求,必须点击Parameter Body 参数写法:abc=123&id=456 也可以选择Headers栏目添加

  4. java基础比较好的笔记总结

    http://wenku.baidu.com/link?url=02LPBvoYztYSd_htlE4wqzJPsA3pu8yKhIZ9yUiyvh0GT-S9D8TCXZ4flsaewkmnN9AY ...

  5. FCM算法

    FCM算法是一种基于划分的聚类算法,它的思想就是使得被划分到同一簇的对象之间相似度最大,而不同簇之间的相似度最小.模糊C均值算法是普通C均值算法的改进,普通C均值算法对于数据的划分是硬性的,而FCM则 ...

  6. NEC学习 ---- 模块 -水平文字链接列表

    HTML代码: <div class="container"> <div class="m-list1"> <ul class=& ...

  7. 3DTouch开发 (基础)

    一.3DTouch开发准备工作(让模拟器也支持 3DTouch 的解决办法) 需要支持3DTouch的设备,如iPhone6s或以上.iOS9或以上.Xcode7或以上,估计很多和我一样的屌丝还没有i ...

  8. linq查询结果转换为指定字段类型的list集合

    转换查询结果为ProductId字段的类型的list集合 (from s in _db.Mobile_TeamAction || s.ActionStatus == select new { s.Pr ...

  9. ngrok 外网访问小能手

    以前在学校的时候想把自己做的网站发布让外网访问,可是又没有虚拟服务器和域名就显得异常的麻烦,曾经试过花生壳映射,效果虽然还不错,但是略显麻烦.今天找到一个更方便的小工具--ngrok ! 简单的介绍一 ...

  10. SQL基础巩固2

    日期函数 函数名称 含义 示例 GetDate 返回当前系统日期和时间,返回值类型为datetime select GETDATE()//输出当前日期 YEAR 返回指定日期的年份 YEAR('08/ ...