在传统的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. 使用ftp软件上传下载php文件时换行丢失bug

    正 文:   在使用ftp软件上传下载php源文件时,我们偶尔会发现在本地windows下notepad++编辑器写好的php文件,在使用ftp上传到linux服务器后,php文件的换行符全部丢失了, ...

  2. HDU1257

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  3. fopen的第一个参数不能有'\n'

    我刚才写了个程序, 需要操作两个文件.  我用fgets获取标准输入流stdin中的文件名, 然后用fopen打开. 结果编译器总是抱错.  调试了一下,发现fopen返回的是NULL. 我在此处加了 ...

  4. nyoj-204

    描述国王有一个魔镜,可以把任何接触镜面的东西变成原来的两倍——只是,因为是镜子嘛,增加的那部分是反的. 比如一条项链,我们用AB来表示,不同的字母表示不同颜色的珍珠.如果把B端接触镜面的话,魔镜会把这 ...

  5. Redis和Memcache对比及选择(转载)

  6. vmware centos6.5 net 配置

    使用NAT模式 虚拟机网络连接使用NAT模式,物理机网络连接使用Vmnet8. 虚拟机设置里面——网络适配器,网络连接选择NAT模式. 虚拟机菜单栏—编辑—虚拟网络编辑器,选择Vmnet8 NAT模式 ...

  7. SourceInsight

    进入到Temp Project窗口分别可以以文件列表的方式,列出所有的文件,每个窗体下边有一排按钮,左边的窗口(secondView.cpp)从左至右分别为:按字母顺序排列所有标记.按照文件中行数顺序 ...

  8. Linux内核设计第三周——构造一个简单的Linux系统

    Linux内核设计第三周 ——构造一个简单的Linux系统 一.知识点总结 计算机三个法宝: 存储程序计算机 函数调用堆栈 中断 操作系统两把宝剑: 中断上下文的切换 进程上下文的切换 linux内核 ...

  9. sshpass 用法举例

    关于sshpass 背景 在Linux后台中,经常会用到ssh.scp等命令.需要进行认证,手动输入密码,是交互式的过程. 当将ssh.scp等命令做成自动化脚本时,可能需要非交互式的登录过程,此时可 ...

  10. Python开发【第三章】:Python编码转换

    一.字符编码与转码 1.bytes和str 之前有学过关于bytes和str之间的转换,详细资料->bytes和str(第四字符串) 2.为什么要进行编码和转码 由于每个国家电脑的字符编码格式不 ...