时间:2021-05-25
querySelector和querySelectorAll是W3C提供的新的查询接口
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下:
1、querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。
2、querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。
3、返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。
这两个方法都可以接受三种类型的参数:id(#),class(.),标签,很像jquery的选择器。
var obj = document.querySelector("#id");var obj = document.querySelector(".classname");var obj = document.querySelector("div");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("#id1, #id2, .class1, class2, div a, #list li img");目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)
浏览器支持查看
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)。
目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。
如想获取页面class属性为"red"的元素,除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。
但Element.querySelector和Element.querySelectorAll的实现有错误,如下
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
querySelector和querySelectorAll方法是W3CSelectorsAPI规范中定义的。他们的作用是根据CSS选择器规范,便捷定位文档中指
在javascript代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题。例如,我们最常见
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要外形CSS属性的支持
在做页面是有时候会用到分割线hr,但是在ie6和ie7下显示很蛋疼,本文将教你如何写出兼容各浏览器的hr。首页我们先了解下hr在各浏览器下的差异,如下表格:比如
当用querySelector()或querySelectorAll()查找类似name="2nd_btn"的元素时,FF,chrome和IE8都会报错。FF,