从元素中querySelectorAll可能会得到你想不到的结果

通过这篇文章,让我知道了document.querySelector("#my-id").querySelectorAll("div div");并不是查询my-id下的div>div的结果,而是会查询里面所有符合从文档开始符合div>div的在my-id里面的结果。以后如果要使用这个属性,相对安全的做法是使用document.querySelectorAll("#my-id div div");,但发现这个也会查询下面所有符合情况的节点,而不是只单独查询符合#my-id下div>div的情况,还会查询#my-id div>div>div啊。真是头疼,看来最好是使用加特定的CSS类比较安全,比如document.querySelectorAll("#my-id .inner");

演示 (打开开发者工具查看输出)

以下为原文:[译]你所不了解的querySelector

原文链接

现代浏览器提供了querySelector和querySelectorAll这两API。它们用来查询匹配CSS选择器的单个或多个元素。这类似CSS选择器:用class或ID选取元素。如果你没有用过它们,MDN上有非常棒的介绍

想象下面的HTML页面:

<!DOCTYPE html>
<html>
<body>
    <img id="outside">
    <div id="my-id">
        <img id="inside">
        <div class="lonely"></div>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </div>
</body>
</html>

document.querySelectorAll("div")返回页面中所有div元素组成的节点列表(NodeList类型的对象),而document.querySelector("div.lonely")返回一个单独的div元素。

document元素支持querySelector和querySelectorAll,你可以在整个页面文档中查找元素。元素本身也支持querySelector和querySelectorAll,你可以查找该元素的子代元素。例如,下面的表达式会查找#my-id下的图片子代元素:

document.querySelector("#my-id").querySelectorAll("img")

在上述html页面例子中,这个表达式将查询到 <img id="inside"> 而不会匹配 <img id="outside">

好好想想,下面这两个表达式做了什么?

document.querySelectorAll("#my-id div div");
document.querySelector("#my-id").querySelectorAll("div div");

你可能想当然地认为它们是等价的。毕竟,第一个是查询一个被#my-div下div包裹的div元素,而另一个是查询一个被div包裹的div元素,而这个div是#my-id的子代元素。然而,当你看这个http://jsbin.com/hineco/edit?html,js,output时,你会发现,它们返回了非常不一样的结果:

document.querySelectorAll("#my-id div div").length === 1;
document.querySelector("#my-id").querySelectorAll("div div").length === 3;

这里到底是怎么回事?

这是因为,element.querySelectorAll不是从element开始匹配元素的。而事实上,它会在element的子代元素中匹配查询条件。因此,我们找到了三个div元素: div.lonely,div.outer,div.inner。我们找它们是因为它们都匹配div div选择符,而且它们都是#my-id的子代元素。

我们要记住,querySelector/querySelectorAll下的CSS选择器是绝对的。它们并不会相对于任何特定的元素,甚至不会相对于调用querySelectorAll的元素。

这甚至对调用querySelectorAll的元素的外部元素生效。例如,这个选择器:

document.querySelector("#my-id").querySelector("div div div")

…在这个代码段(JSbin)中匹配div.inner

<!DOCTYPE html>
<html>
  <body>
    <div>
      <div id="my-id">
        <div class="inner"></div>
      </div>
    </div>
  </body>
</html>

这个API让我觉得很意外,我所问过的前端工程师也同意我的观点。然而,这个并不是一个bug。这就是规范定义它的工作方式,而浏览器也一致地按这种方式实现了它。John Resig 评论道,当这个规范出来的时候,他和其他人都感到这个API的行为相当的诡异。

如果你无法轻易地将选择器重写为“绝对的”形式,这里有两个选择::scopeCSS伪选择器和query/queryAll

:scope伪选择器是相对当前作用域进行匹配的。这名字来自CSS的作用域标识符,它能够限定样式在文档中的范围。

document.querySelector("#my-id").querySelectorAll(":scope div div");

不幸的是,支持作用域CSS和:scope伪选择器的浏览器非常少。只有最新的火狐浏览器默认支持它。Chrome和Opera需要隐藏的很深的实验功能来开启它。Safari的实现则漏洞白出。而IE干脆没有实现。

另一个选择是element.query/queryAll。它们是querySelectorquerySelectorAll的替代方法,存在DOM父节点上。它们也接受选择器,但这些选择器的解析是相对于调用这些方法的元素。不幸的是,这些方法更加模糊不清:MDN或caniuse.com里都没有提及它们,并且2015年6月18日的DOM4草案中也不见踪影。他们仍然存在于一个较旧的版本中,于2014年二月4日,也出现在WHATWG 现存文档中。他们已经被至少两个扩展兼容库实现:

总的来说,DOM规范不是总是清晰明了的。了解像这些坑很重要,因为从它们的行为中很难了解它们的实质特性。幸运的是,你可以重写你的选择器,所以没什么关系。如果你无法重写选择器,这里会有一些实现库为你提供你要的现代API。另外,类似jQuery的库会为你提供一套稳定的友好的接口来查找DOM元素。

原创文章:从元素中querySelectorAll可能会得到你想不到的结果 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/queryselectorall.html)
评论已关闭。

“从元素中querySelectorAll可能会得到你想不到的结果”有3个评论

  1. web小子

    测试2

    登录回复
  2. web小子

    测试

    登录回复