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;
};
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合css selector的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。 可以500%提高开发效率的前端UI框架!
目前 IE8/9及Firefox/Chrome/Safari/Opera的最新版已经支持它们。
querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。请看下面的例子:
//获取body元素 varbody=document.querySelector("body"); //获取ID为myDiv的元素 varmyDiv=document.querySelecotr("#myDiv"); //获取第一个包含类selected的元素 varselected=document.querySelector(".selected"); //获取第一个包含类button的图像元素
varimg=document.body.querySelector("img.button");当querySelector()方法应用Document类型上时,它会尝试从文档元素开始匹配模式。如果应用与Element类型,查询则只会尝试从该元素的子孙节点中寻找匹配。
CSS查询可以根据需要复杂化或简单化。如果查询中有语法错误或者有不支持选择器,那么querySelector()或抛出一个错误。 可以500%提高开发效率的前端UI框架!
querySelector()方法还接受可选的第二个参数,它是一个命名空间解析器,就是一个接受一个命名空间前缀并返回其相关URI的函数,类似于:
varnsresolver=function(prefix){ switch(prefix){ case"w3cmm": return"http://www.w3cmm.com"; //此处其它代码 } };
命名空间解析器对于在嵌入了其它语言诸如SVG或MathML的XHTML文档中执行查询非常有用,XML文档亦如此。CSS查询中的命名空间是使用一个管道来指定的,如下:
varsvgImage=document.querySelector("svg|svg",function(prefix){ switch(prefix){ case:"svg": return"http://www.w3.rog/2000/svg"; } });
这个例子通过在文档中查找定义为<svg:svg>的元素返回了第一个SVG图像。当在查询中遇到了svg命名空间前缀时,则调用命名空间解析器函数来确定URI。没有命名空间解析器,则会抛出一个错误,因为查询引擎无法辨识svg命名空间前缀。
可以500%提高开发效率的前端UI框架!
各浏览器中querySelector和querySelectorAll的实现差异
如想获取页面class属性为"red"的元素,除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。
但Element.querySelector和Element.querySelectorAll的实现有错误,如下
<div id="d1"> <p><a href=http://www.jcodecraeer.com>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.jcodecraeer.com alert(obj2.length); // -> 1 </script>
在支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”,和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的,根据定义应该是在元素d1范围内查找"div a",而d1内压根没有div。因此应该分别返回null,空集合。
jQuery1.4.2 及之前版本中只使用了document.querySelectorAll,没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll,但做了修复。在选择器前加了"#__sizzle__"以强制其在指定元素内查找(3903-3918行)。简化下 可以500%提高开发效率的前端UI框架!
function $(id){return document.getElementById(id);} var d1 = $('d1'); var obj1 = d1.querySelector('div a'); var obj2 = d1.querySelectorAll('div a'); var old = d1.id, id = d1.id = "__sizzle__"; try { var query = '#' + id + ' div a'; alert(d1.querySelector( query )); alert(d1.querySelectorAll( query ).length); } catch(e) { } finally { old ? d1.id = old : d1.removeAttribute( "id" ); }
实现很巧妙,指定范围的元素如果有id,将其保留在old,"__sizzle__"赋值其作为临时id,在选择器"div a"前指定查找范围为"#__sizzle__",即d1。finally语句来最后清理,如果指定范围的元素本身有id将其恢复为old,没有则去掉临时的id属性"__sizzle__"。
相关推荐
querySelector 但用于父节点。 给定一个节点,选择与给定选择器匹配的父/祖先。 安装 $ npm install --save select-parent 用法 var selectParent = require ( 'select-parent' ) var redDiv = selectParent ( 'div...
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。 浏览器支持 ...
querySelector可以刺穿Shadow DOM根,而无需知道通过嵌套Shadow根的路径。 可用于自动测试Web组件,例如使用Selenium,Puppeteer。 // available as an ES6 module for importing in Browser environments import {...
javascript DOM 选择器 querySelector 介绍
下面小编就为大家带来一篇javascript高级选择器querySelector和querySelectorAll全面解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录
在IE8的新特性里,提到了会支持querySelector()和querySelectorAll()方法,如何使用这里就不说了,只是记录下我在使用时遇到一个问题。
其实关于querySelector和querySelectorAll的介绍说明很多,在此主要是做个记录
在 JavaScript 中,我们通过 document.querySelector 方法获取选中的选项,并将结果显示在页面上。点击提交投票按钮后,将输出所选选项的值,并清空选中的选项。 注意:此示例假设在同一页面上只有一个单选投票,...
这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。 复制代码 代码如下: element = document.querySelector(‘selectors’)...
javascript / typescript中的querySelector完成 如果通过ES6导入导入了html文档, querySelector在js / ts文档中键入querySelector会触发可能CSS选择器的自动完成。 例如,将文档导入为: import * as template ...
getElementsByTagName,getElementsByName,querySelectorAll,XPath,All,expression,coordinates”等多种选择器定位元素,例程中使用的最多的便是Selector选择器选择元素,可以在这里学习:querySelector() 方法 ...
:label: 键入querySelector 通过利用TypeScript 4.1模板文字类型, querySelector和querySelectorAll函数具有更好的键入功能。 :optical_disk: 安装 npm i -D typed-query-selector :watermelon: 用法 自动补片 ...
javascript编辑器 + 驱动的html5 javascript编辑器组件 最初基于的htmleditor ... querySelector ( '#editor' ) } ) editor . on ( 'change' , function ( ) { var value = editor . getValue ( ) } ) editor . on
JavaScript隐藏和搜索 问题陈述 我们的Web开发工具箱中最重要的技能之一就是在DOM中查找元素。我们需要几种方法的帮助,以使该过程变得快速且容易。 目标 使用document.querySelectorAll查找嵌套节点 更改正确的DOM...
先按W3C的规范来说这两个方法应该返回的内容吧: querySelector: return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.(返回指定元素...
// el and input: querySelector or querySelectorAll or getElementById el: document.querySelectorAll('.cron'), input: document.getElementById('input-cron'), autoplay: true }); // Métodos // cron...