Element上querySelector和querySelectorAll的异常实现

2012-11-05

Element下querySelector和querySelectorAll的错误实现querySelector和querySelectorAll是W3C提供的新的查

Element下querySelector和querySelectorAll的错误实现

querySelector和querySelectorAll是W3C提供的新的查询接口

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的实现有错误，如下

实现很巧妙，指定范围的元素如果有id，将其保留在old，"__sizzle__"赋值其作为临时id，在选择器"div a"前指定查找范围为"#__sizzle__"，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性"__sizzle__"。

Web前端

Element上querySelector和querySelectorAll的异常实现