在传统的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. Windows8.1自定义快捷方式添加到开始屏幕

    Windows8.1自定义快捷方式添加到开始屏幕 将快捷方式复制到如下路径,在开始屏幕的所有中找到对应快捷方式,右键选择添加到开始屏幕即可. C:\Users\%USERNAME%\AppData\R ...

  2. Week1 学长的经验教训

    我手头拿到的是上一届学长的软件工程大作业,作业的名称是——汽车4S店信息管理系统. 这个大作业我认为还是非常典型的传统模式的大作业,由手机端(客户端)和服务端组成,非常的传统.             ...

  3. zk编程语言: 如何改变datebox框值的大小及高度

    <?page title="" contentType="text/html;charset=UTF-8"?> <zk > <st ...

  4. C++11---nullptr

    1.nullprt与NULL 代码: void f(int i) {    cout << "f(int)" << endl;} void f(char* ...

  5. 杭电ACM题目分类

    基础题: 1000.1001.1004.1005.1008.1012.1013.1014.1017.1019.1021.1028.1029.1032.1037.1040.1048.1056.1058. ...

  6. IOS第11天(3:UIPickerView省市联动)

    ********* #import "ViewController.h" #import "Province.h" @interface ViewControl ...

  7. IOS第八天(6:UITableViewController新浪微博, 模型和 控件位置封装一起statusFrame)

    *****HMViewController #import "HMViewController.h" #import "HMStatus.h" #import ...

  8. 临床试验中PI、CI、SI、COI是指哪些人?

    今天为大家介绍的是临床试验的研究者的类型.临床试验的研究者是指在试验所在地负责实施临床试验的人员. 如果一项试验在试验场所由一组人员实施,研究者则为该组人员的负责人或领导者,也称之为主要研究者(Pri ...

  9. angular+ckeditor最后上传的最后一张图片不会被添加(bug)

    做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model=& ...

  10. AIM Tech Round 3 (Div. 2) A B C D

    虽然打的时候是深夜但是状态比较好 但还是犯了好多错误..加分场愣是打成了降分场 ABC都比较水 一会敲完去看D 很快的就想出了求0和1个数的办法 然后一直wa在第四组..快结束的时候B因为低级错误被h ...