HTML5:原生DOM选择器,类jquery
2016-09-07 00:00
411 查看
1.querySelector():返回匹配的第一个元素,若没有匹配项,返回null
2.querySelectorAll():返回匹配的元素集合,若没有匹配项,返回空的nodelist节点数组
3.返回的结果是静态的,dom结构改变不会更新之前取到的结果
浏览器支持:
目前 IE8+,ff,chrome 都支持此API
(IE8中的selector string 只支持css2.1的)
接受参数:合法的css选择器语法
ele = document.querySelector(“selectors”);
eleList = document.querySelectorAll(“selectors”);
其中,selectors可以包含多个css选择器,用逗号隔开
ele = document.queryselector(“selector1,selector2,…”);
eleList = document.queryselectorAll(“selector1,selector2,…”);
关于转义的问题:具体参见 http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html
其中两个例子的个人理解:
1.document.querySelector("fo:bar")=>document.querySelector("fo\\:bar")
因为'\'本身就是转义符号,所以在字符串中要先将'\'转义,这是第一个'\'的作用
然后被转义位'\'的字符与':'字符结合,完成对':'字符对转义之后形成的字符串才能被querySelector理解为'fo:bar'.
2.document.querySelector("fo\bar")=>document.querySelector("fo\\\\bar")
前两个'\'字符与上一个例子中的作用相同,第三个'\'的作用是把该id字符串中的'\'转义为'\'字符,然后两个被转义后的'\'结合才能被querySelector()理解为'fo\bar'.
单个selector:
var obj = document.querySelector(“#id”);
var obj = document.querySelector(“.class”);
var obj = document.querySelector(“tagName”);
多个selectors:
2.querySelectorAll():返回匹配的元素集合,若没有匹配项,返回空的nodelist节点数组
3.返回的结果是静态的,dom结构改变不会更新之前取到的结果
浏览器支持:
目前 IE8+,ff,chrome 都支持此API
(IE8中的selector string 只支持css2.1的)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1 | 3.5 (1.9.1) bug 416317 | 9 8 (CSS2 selectors only) | 10 | 3.2 (525.3) WebKit bug 16587 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | yes | 9 | 10.0 | 3.2 |
ele = document.querySelector(“selectors”);
eleList = document.querySelectorAll(“selectors”);
其中,selectors可以包含多个css选择器,用逗号隔开
ele = document.queryselector(“selector1,selector2,…”);
eleList = document.queryselectorAll(“selector1,selector2,…”);
关于转义的问题:具体参见 http://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html
其中两个例子的个人理解:
1.document.querySelector("fo:bar")=>document.querySelector("fo\\:bar")
因为'\'本身就是转义符号,所以在字符串中要先将'\'转义,这是第一个'\'的作用
然后被转义位'\'的字符与':'字符结合,完成对':'字符对转义之后形成的字符串才能被querySelector理解为'fo:bar'.
2.document.querySelector("fo\bar")=>document.querySelector("fo\\\\bar")
前两个'\'字符与上一个例子中的作用相同,第三个'\'的作用是把该id字符串中的'\'转义为'\'字符,然后两个被转义后的'\'结合才能被querySelector()理解为'fo\bar'.
单个selector:
var obj = document.querySelector(“#id”);
var obj = document.querySelector(“.class”);
var obj = document.querySelector(“tagName”);
多个selectors:
var el = document.body.querySelector("style[type='text/css'], style:not([type])”);
var elements = document.querySelectorAll(“#score>tbody>tr>td:nth-of-type(2)”);
var elements = document.querySelectorAll(“#div1,#div2,.class1,.class2,div a,#list li img”);
相关文章推荐
- 开发移动应用程序的三种选择:原生、HTML5或混合
- JS原生属性选择器querySelector----通过href属性获取对应a标签的Dom元素
- HTML5的selector选择DOM元素API.
- HTML5 VS 原生应用:如何选择合适的开发策略?
- 开发移动应用程序的三种选择:原生、HTML5或混合
- 【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考
- 原生JS的DOM节点操作
- 避坑宝典:如何选择HTML5游戏引擎
- 使用原生Javascript实现城市选择逐级联动
- 原生 js 操作dom的方法(创建节点和操作节点的几种方法)
- 浅谈 HTML5 的 DOM Storage 机制
- 原生js如何让一个dom原生做抛物线运动(右开口u型)
- 常见的原生DOM操作
- 原生HTML5自定义事件
- DOM练习3-二级联动菜单(选择省份城市)
- Java解析xml的主要解析器: SAX和DOM的选择(附上新方法--Pull解析)
- HTML5 使用video标签实现选择摄像头功能
- 牛人妙计:HTML5应用也能像原生一样跑得快
- JavaScript 的 DOM 实现左右选择的下拉菜单效果
- 从Android原生角度看移动html5开发APP(一)原生与html对比