关于一个新的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的 ...
随机推荐
- HDU 5762
Teacher Bo Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Tot ...
- HTML静态网页 格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 相对于自己最近的父元素来定位的 1.外层没有pos ...
- Linux内核设计第七周 ——可执行程序的装载
Linux内核设计第七周 ——可执行程序的装载 第一部分 知识点总结 一.预处理.编译.链接和目标文件的格式 1.可执行程序是怎么得来的 编译链接的过程 预处理阶段 gcc -E -o XX.cpp ...
- JQ中的延迟对象deferred中的promise等的使用
一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...
- iOS摄像头和相册-UIImagePickerController常用操作
在一些应用中,我们需要用到iOS设备的摄像头进行拍照,视频.并且从相册中选取我们需要的图片或者视频. 关于iOS摄像头和相册的应用,可以使用UIImagePickerController类来完成控制. ...
- UIBarButtonItem的创建
1. rightBarButtonItem的创建 -(void)initRightBar{ UIBarButtonItem *done =[UIBarButtonItem rightItemWithT ...
- LeetCode Palindrome Permutation II
原题链接在这里:https://leetcode.com/problems/palindrome-permutation-ii/ 题目: Given a string s, return all th ...
- keepalived工作原理和配置说明 腾讯云VPC内通过keepalived搭建高可用主备集群
keepalived工作原理和配置说明 腾讯云VPC内通过keepalived搭建高可用主备集群 内网路由都用mac地址 一个mac地址绑定多个ip一个网卡只能一个mac地址,而且mac地址无法改,但 ...
- Display Voxel Gird and PCA
https://github.com/yhexie/NDTEX 最近科研没有思路,写点代码加强基础知识的学习吧. 下面写了一个点云体素分割,PCA计算体素内点云的特征值和特征向量.
- C#基础知识大杂烩
这样是调用父类中第二个有参的构造函数,如果去掉Base默认调用无参构造函数 注意执行顺序是:先调用父类的构造函数,然后再执行子类自己的构造函数. 父类: class Person { public P ...