w3 2006 年就推出了w3 selectors-api
标准,目前支持的浏览器还不多.
今天在chrome和Firefox 3.1下做了一个测试,结果让我很迷惑
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selectors API Example</title>
</head>
<body>
<span>body span1</span>
<span>body span2</span>
<div id='bar'>
<span>span1</span>
<div>
<span>span2</span>
</div>
</div>
</body>
</html>
alert(document.getElementById('bar').querySelectorAll('div span').length);//2
而目前常用的javascript框架中的选择器使用:jQuery举例
alert($('div span','#bar').length);//1
很明显w3的标准在匹配选择符的时候首先把查询范围的Element也包括进去了,而目前的框架是在查询范围的Element的子节点查找的.可是这样的话如果按w3的标准想要剔除这个范围的Element的话,上面的例子就要写成
alert(document.getElementById('bar').querySelectorAll('div div span').length);//1
也许还有其他的写法.
如果只想选择span1的话
//第一种情况,范围没有确定,也就是一个selector表达式下
document.querySelectorAll('#bar>span').length;//1
$('#bar>span').length;//1
//第二种情况,范围已经确定,
$('>span','#bar').length;//1
document.querySelectorAll('span',document.querySelector('#bar').length;//2
document.querySelectorAll('>span',document.querySelector('#bar').length;//出错了,不能这样写
我不知道是否是chrome
和Firefox 3.1
的实现有问题.还是他们都太按标准来了.
从某种程度上讲,w3把查询范围的Element也包括进去不是什么大问题,毕竟这是标准,大家习惯了就行了,可是
不支持
'>span'
这种写法就有问题了.如果其他的浏览器在实现上也这样做的话,那么这个标准就形同虚设了.
更进一步的测试:
document.getElementById('bar').querySelectorAll('*').length;//3,这次不包括查询范围了.
document.getElementById('bar').querySelectorAll('* div span').length;//2,又包括了
document.getElementById('bar').querySelectorAll('#bar').length;//0,又不包括了
事情更复杂了,选择器可以很复杂,但是对于范围的确定不应该有二义性.
======PS======
经过思考和hax的回复，终于搞清楚了，w3 设计的这个selectors-api是个
纯支持CSS selectors
同时标题也应该改改了
他要达到的是和在样式表里面写的css选择到的 elements 完全一致的结果。
而我们在写程序的时候和这个情形不一样，因为写css的时候是一次完成的，初始范围是整个document的所有节点.
写程序的时候，是有中间过程的，一次选择后的结果会被再一次做为初始范围。这和上面的就不同了。
用hax的描述说就是
写道
但现在浏览器中的CSS是没有局部化的selector
概念的，所以不支持也是情有可原
这样看来，还是要依靠像jQuery
这样的选择器一阵子了
===来自hax的测试代码===
document.querySelectorAll('span').length;//4
bar.querySelectorAll('span').length;//2
document.querySelectorAll('body span').length;//4
bar.querySelectorAll('body span').length;//仍然是2而
$('body span', bar);//则返回 null
所以 bar.querySelectorAll('body span') 的意思是
符合 body span 并且属于 bar 的子树的节点。
而 $('body span', bar) 表示的是
以bar为context，匹配 body span ，也就是相当于：
document.querySelectorAll('#bar body span')
分享到：
相关推荐
在前端开发领域，jQuery、CSS和W3School是学习和工作中的重要工具。这些技术的API和电子书提供了丰富的资源，帮助开发者理解和掌握它们的功能与用法。 **jQuery API** jQuery是一个广泛使用的JavaScript库，它简化...
Java的XML处理能力主要体现在`javax.xml`和`org.w3c.dom`等包中，包括了DOM、SAX、StAX等多种解析方式，以及XPath和XSLT等转换工具。 综上所述，Java JDK 1.7版本的API文档（jdk-7u17-apidocs）是一个全面的开发者...
为了深入学习jQuery，可以访问官方文档（https://api.jquery.com/）和jQuery教程网站，如W3Schools（https://www.w3schools.com/jquery/）。此外，实践是提高技能的关键，通过编写实际项目来巩固理论知识。 总之，...
对于简单的一次关闭选择器匹配，最简单的方法是将选择器指定为字符串： Selectors selectors = new Selectors ( new W3CNode (document));List< Node> result = selectors . querySelectorAll( " head > :not(meta)...
API包含了类库、接口、枚举、异常等，为开发者提供了大量的预先编写好的代码，使得开发工作更加高效和便捷。以下是一些重要的Java API及其相关知识点： 1. **基础API**： - `java.lang`：所有Java程序都会自动导入...
此外，CSS Selectors API允许我们使用CSS选择器选择元素，如`element.matches()`判断元素是否匹配某个选择器。 在学习和使用通用DOM API时，理解文档的节点树结构至关重要，因为所有操作都是基于这个树形结构进行的...
名称 IE兼容速查表 ?css 2 W3C参考文档(英文版) .chm?css 2 W3C参考文档(中文版) .chmcss 2.0参考...SELECTORS API Level 2.txt w3C css selectorCSS1,CSS2,CSS3.txt阿里妈妈网页字体平台.txt 查询浏览器支持状态.txt
盒模型的类型有两种：标准盒模型（W3C标准）和IE盒模型，它们对边框和内边距的计算方式不同。 **三、定位（Positioning）** 1. **静态定位（Static）**：元素遵循正常文档流。 2. **相对定位（Relative）**：元素相...
- **在线教程**：W3School、MDN Web Docs等网站有详细的jQuery教程。 - **开源项目**：参与GitHub上的jQuery相关项目，提升实践能力。 - **社区论坛**：Stack Overflow、jQuery Forum等社区可以解答疑惑，交流经验。...
jQuery是JavaScript库中的一款经典...虽然这个版本相对较旧，但很多基础概念和API在新版本中依然适用，是理解jQuery工作原理的良好起点。随着学习的深入，开发者将能够熟练运用jQuery构建响应式、高性能的网页应用。
1. **选择器（Selectors）**：jQuery支持CSS选择器，如`id`、`class`、`tag`等，以及更复杂的选择器组合。例如，选取ID为"example"的元素： ```javascript $("#example"); ``` 2. **DOM操作（DOM Manipulation）...
The Selectors API provides a set of functions for selecting elements from the DOM using CSS selectors. This is an alternative to the traditional DOM traversal methods and can be more efficient in ...
5. **IE8Mode**：提供了最高的标准支持，包括W3C CSS Level 2.1 Specification、W3C Selectors API，并部分支持W3C CSS Level 3 Specification。 6. **EdgeMode**：指示IE以当前可获得的最高模式显示内容。在IE8中...
DOM是W3C（World Wide Web Consortium）组织制定的标准，使得开发人员可以使用各种编程语言（如JavaScript、Java、Python等）对网页内容进行动态操作。 DOM将网页视为一个树形结构，其中每个节点代表文档的一部分。...
- **事件处理（Event Handling）**: jQuery提供了一种统一的方式来绑定和触发事件。如`$("button").click(function() { alert("Button clicked!"); });`。 - **动画（Animation）**: jQuery的`.fadeIn()`, `....
- **选择器（Selectors）**: jQuery支持CSS1到CSS3的选择器，以及一些特有的选择器，如`:eq()`, `:gt()`, `:lt()`, `:first`, `:last`等，使得元素选取变得非常便捷。 - **链式调用（Chaining）**: 由于jQuery对象...
）来过滤匹配的博客文章、作品集和我的简历部分按时间顺序过滤项目（博客文章、作品集、工作经历） 加载 Sizzle 以填充对 W3C Selectors API 的支持？ （如此处所述： : ） 一旦我得到以下答案，将 Mongoose 实现为...
- **选择器（Selectors）**：jQuery的选择器与CSS选择器相似，但提供了更强大的功能，如`$("#id")`选择ID为id的元素，`$(".class")`选择所有class为class的元素。 - **DOM操作（DOM Manipulation）**：包括元素的...
jQuery的核心特性包括选择器（Selectors）、DOM操作、事件处理、动画效果和Ajax交互。 ### 二、jQuery选择器 jQuery选择器是基于CSS选择器的扩展，使得选取DOM元素变得简单。例如，`$("#id")`用于选取ID为"id"的...
- 在线示例和教程：网上有大量免费资源，如W3Schools、Mozilla Developer Network等，提供互动式的jQuery教程。 ### 7. 结合实际应用 在实际项目中，jQuery常用于页面交互增强、数据异步加载和页面组件的构建。...