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-Selectors-源码.rar
资源分类:Python库 所属语言:Python 资源全名:rf-se-dtl-selectors-plugin-0.3.0.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
需要配合firefox3.5或以上版本使用,属于firefox的一个插件,能够检测当前页面调用的CSSwenjian中,哪些被使用,那些为使用
jscodeshift -t https://rawgit.com/lorcan/test-selectors-codemod/master/transforms/remove-test-selector-helper.js ./tests 发展 要在本地下载并运行代码,请执行以下操作: git clone ...
Frontend_Set_Selectors2 将下面的文本粘贴到项目中,并仅使用javascript来完成以下问题。 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title >...
frontend-selectors-flexbox-base:HTML CSS课程2021年3月15日
testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展 testcafe-react-selectors这个插件提供了选择器扩展,使得使用 TestCafe 测试ReactJS组件变得更容易。 这些扩展允许你以React的方式选择页面元素。安装...
用法 var csc = require('css-selectors-count');var fs = require('fs');fs.readFile('style.css', {encoding: 'utf8'}, function(err, file) { if(err) throw err; console.log(csc(file)); // return a ...
待办事项清单申请 在这个简单的待办事项列表应用程序中,将使用Redux , Redux-thunk , Selectors , Styles-Components 。 最后,将使用mocha和chai库测试该应用程序的所有操作。
因为创建jQuery是使DOM操作快速而轻松的一种方式,所以其中很大一部分是正确选择了要使用的DOM节点。 幸运的是,浏览器提供了一种无缝的方法来选择正确HTML,类似于CSS选择器。 当我们使用jQuery时,可以将这些选择...
jQuery选择器和事件功能部件的编号和名称:功能部件1:显示图像司机:Barrett Nance导航员:James Shreckengost 预计完成时间:90分钟开始时间:2:15 结束时间:3:16 实际需要完成的时间:61分钟功能的编号和名称:...
CSS样式表和嵌套选择器目标<link>... 使用嵌套的元素选择器来设置“破冰船”首页的导航样式。 玩边框,高度,填充,边距,行内显示和浮动。指示我们将设置“破冰船”网站导航的样式。 目标是使用浮点数将h3移至...
使用伪选择器和ID选择器的样式链接目标<link>... 构建问题div一类的questions 。 通过提供一个创建“丸”式的按键a标签的btn类。 使用ID选择器为导航链接设置样式。 使用伪选择器为导航链接和药丸赋予“悬停”...
TA型复杂选择器
postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件 postcss-icss-selectors 用于本地范围类和id的css模块的PostCSS插件用法postcss([ require('postcss-icss-selectors')(options) ])有关环
Tailwindcss-伪选择器Tailwind CSS插件,将所有不同的伪选择器添加为变体安装NPM npm install tailwindcss-pseudo-selectors --save-dev纱yarn add tailwindcss-pseudo-selectors -D用法配置将插件添加到您的...
语言:English 从采样元素生成css选择器。 要使用此扩展,打开开发人员工具并查找“选择器”选项卡。打开后,如果尚未启用,请按“启用选择模式”,然后开始选择元素。该算法将尝试找到最具体且最短的选择器,因此您...
1.安装低版本 firefox ,高版本已经不兼容了 2.打开 firefox 浏览器 "附件组件" ----> "插件" ---->... "从文件安装附加组件" ----> 双击选中 .xpi 的压缩包 进行安装 ...3.重启浏览器就可以使用了 ...
grunt-shrink-selectors CSS 重命名工具 入门 这个插件需要 Grunt ~0.4.5 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件...
在瑞典语的赞助结果中更新选择器通过香草javascript和CSS将小部件注入html。