在传统的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. Quartz.net 的简单使用,创建定时任务

    ISchedulerFactory sf = new StdSchedulerFactory(); sched = sf.GetScheduler(); JobDetail job = new Job ...

  2. bzoj1150: [CTSC2007]数据备份Backup--贪心+优先队列维护堆

    题目大意:将k对点两两相连,求最小长度 易证得,最优方案中,相连的办公楼一定是取相邻的比取不相邻的要更优 然后就可以用贪心来做这道题了.. 之前向CZL大神学习了用堆来贪心的做法orz 大概思路就是将 ...

  3. oracle空间管理

    表空间:组织数据文件的一种途径,  是一个逻辑概念  包含有 表,字段,索引 一个数据库可以对应多个表空间 一个物理文件对应一个表空间 任何一个数据库创建的第一一个表空间是 system Tables ...

  4. BizTalk动手实验(十三)EDI解决方案开发配置

    1 课程简介 通过本课程熟悉EDI解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 2 准备工作 从BizTalk安装目录的SDK中将EDI ...

  5. Combination Lock

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Finally, you come to the interview room. You know that a Micr ...

  6. Android SDK路径不能含有空格

    错误, android sdk location shoud not contain whitespace,as this can cause problems with thte ndk tools

  7. 获取 Cookie

    /// <summary>    /// 获取WPF url 地址中的Cookies    /// </summary>    public partial class Coo ...

  8. 3DTouch开发 (基础)

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

  9. 针对ajax执行后swiper特效无法执行解决方案

    ajax执行后重新绑定swiper事件.

  10. 反向代理在Web渗透测试中的运用

    在一次Web渗透测试中,目标是M国的一个Win+Apache+PHP+MYSQL的网站,独立服务器,对外仅开80端口,网站前端的业务系统比较简单,经过几天的测试也没有找到漏洞,甚至连XSS都没有发现, ...