querySelector和querySelectorAll方法介绍
module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};
[html]
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。
目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。
如想获取页面class属性为"red"的元素,除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。
但Element.querySelector和Element.querySelectorAll的实现有错误,如下
[code]
<div id="d1">
<p><a href="http://www.sina.com.cn">SINA</a></p>
</div>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
var d1 = $('d1');
var obj1 = d1.querySelector('div a');
var obj2 = d1.querySelectorAll('div a');
alert(obj1); // -> http://www.sina.com.cn/
alert(obj2.length); // -> 1
</script>
在支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”,和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的,根据定义应该是在元素d1范围内查找"div a",而d1内压根没有div。因此应该分别返回null,空集合。
最新文章
- MVC学习网站
- Understanding CMS GC Logs--转载
- nyist 596 谁是最好的Coder
- 从Config文件中读取节点的配置信息
- cocos2d-x 3.2读取xml和json练习
- Bootstrap 基本用法(续)
- Centos 6.5 配置nginx服务
- 转载 GUID介绍
- IBOutlet &; IBAction
- TCP keepalive under Linux
- C# DataTable去除重复,极其简便、简单
- 使用一个HttpModule拦截Http请求,来检测页面刷新(F5或正常的请求)
- java 调用webservice的各种方法总结,wsimport方法总结
- Vue深度学习(2)
- android批量打包
- Java I/O流详解与应用
- 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件
- python2,python3同时安装时,python3可以安装并升级pip库,python2报错的解决办法
- 【驱动】Linux初级驱动系列框架
- MySql 学习参考目录
热门文章
- Oracle触发器(trigger):view,schema,database
- Java程序栈信息文件中的秘密(五)
- java实现的Trie树数据结构
- SQL Server 2012学习笔记 1 命令行安装
- 【Tomcat】使用Eclipse运行Tomcat7源码
- iOS 10 因苹果健康导致闪退 crash
- 笔记 postgresql oid同步
- 在单链表和双链表中删除倒数第K个节点
- [NOIP2001提高组]CODEVS1014 Car的旅行路线(最短路)
- Servlet之ServletContext以及文件操作