在传统的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. CI框架不能有Index控制器

    今天部署了ci框架,想用用它.创建别的控制器没什么错误.但是我创建了一个Index控制器,并访问了index方法,报错了.但是直接在方法中写输出就没事.而且方法名称改为其他部位index的也能访问. ...

  2. 对js中的Date扩展，格式化日期

    /** * 对Date的扩展,将 Date 转化为指定格式的String 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) * 可以用 1-2 个占位符 年 ...

  3. CMS .NET 程序框架 从2.0/3.5升级到4.0 版本后 需要调整的地方

    问题一: document.forms1.action 不可使用 需要修改程 document.forms[0] .NET 程序框架 从2.0/3.5升级到4.0 版本后,document.forms ...

  4. Android课程---Android Studio简单设置

    Android Studio 简单设置 界面设置 默认的 Android Studio 为灰色界面,可以选择使用炫酷的黑色界面.Settings-->Appearance-->Theme, ...

  5. JS开发windows phone8.1系列之1

    http://msdn.microsoft.com/zh-cn/library/windows/apps/dn629638.aspx,要点: 1.了解项目结构:package.appxmanifest ...

  6. 论url

    http://www.cnblogs.com/yexiaochai/p/3650379.css文件中 background: (../images/logo.png); http://www.cnbl ...

  7. 【iCore3 双核心板_FPGA】例程五：Signal Tapll实验——逻辑分析仪

    实验指导书及代码包下载: http://pan.baidu.com/s/1bnNRfaB iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  8. 【iCore3 双核心板_FPGA】实验十六：基于SPI总线的ARM与FPGA通信实验

    实验指导书及代码包下载: http://pan.baidu.com/s/1hs6lDdi iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  9. getServletPath getRequestURI getRequestURL区别

    getContextPath:/test               //上下文,类似工程名 getServletPath:/test.jsp getRequestURI:/test/test.jsp ...

  10. Excel 中 Index 和 Match 方法的使用

    MATCH函数(返回指定内容所在的位置) MATCH(lookup-value,lookup-array,match-type) lookup-value:表示要在区域或数组中查找的值,可以是直接输入 ...