关于一个新的DOM选择器querySelector
在传统的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的更多相关文章
- 原生的强大DOM选择器querySelector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 强大DOM选择器querySelector
今天碰到问题,用了下不经常用的querySelector还不错 querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对 ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- 订制DOM选择器
本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...
- html5 中高级选择器 querySelector
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
随机推荐
- 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 ...
- 字典树(Trie Tree)
在图示中,键标注在节点中,值标注在节点之下.每一个完整的英文单词对应一个特定的整数.Trie 可以看作是一个确定有限状态自动机,尽管边上的符号一般是隐含在分支的顺序中的.键不需要被显式地保存在节点中. ...
- firebox httprequester 模拟请求
获取下载插件 httprequester 模拟POST请求,必须点击Parameter Body 参数写法:abc=123&id=456 也可以选择Headers栏目添加
- java基础比较好的笔记总结
http://wenku.baidu.com/link?url=02LPBvoYztYSd_htlE4wqzJPsA3pu8yKhIZ9yUiyvh0GT-S9D8TCXZ4flsaewkmnN9AY ...
- FCM算法
FCM算法是一种基于划分的聚类算法,它的思想就是使得被划分到同一簇的对象之间相似度最大,而不同簇之间的相似度最小.模糊C均值算法是普通C均值算法的改进,普通C均值算法对于数据的划分是硬性的,而FCM则 ...
- NEC学习 ---- 模块 -水平文字链接列表
HTML代码: <div class="container"> <div class="m-list1"> <ul class=& ...
- 3DTouch开发 (基础)
一.3DTouch开发准备工作(让模拟器也支持 3DTouch 的解决办法) 需要支持3DTouch的设备,如iPhone6s或以上.iOS9或以上.Xcode7或以上,估计很多和我一样的屌丝还没有i ...
- linq查询结果转换为指定字段类型的list集合
转换查询结果为ProductId字段的类型的list集合 (from s in _db.Mobile_TeamAction || s.ActionStatus == select new { s.Pr ...
- ngrok 外网访问小能手
以前在学校的时候想把自己做的网站发布让外网访问,可是又没有虚拟服务器和域名就显得异常的麻烦,曾经试过花生壳映射,效果虽然还不错,但是略显麻烦.今天找到一个更方便的小工具--ngrok ! 简单的介绍一 ...
- SQL基础巩固2
日期函数 函数名称 含义 示例 GetDate 返回当前系统日期和时间,返回值类型为datetime select GETDATE()//输出当前日期 YEAR 返回指定日期的年份 YEAR('08/ ...