你所不相识的querySelector

2019年8月31日 101次阅读 来源: specialCoder

原文链接地点：http://blog.lxjwlt.com/front-…
笔者整顿笔记：

1.API引见

先看看MDN上怎样引见这个API的：
概述
返回当前文档中婚配一个特定挑选器的一切的元素(运用深度优先，前序遍历划定规矩如许的划定规矩遍历一切文档节点) .返回的对象范例是 NodeList.

语法

elementList = document.querySelectorAll(selectors);

elementList 是一个non-live的 NodeList 范例的对象.
selectors 是一个由逗号衔接的包括一个或多个CSS挑选器的字符串.
假如 selectors参数中包括 CSS伪类 ,则返回一个空的elementList.

例子
下面的例子返回一个文档中一切的class为”note”或许 “alert”的div元素.

var matches = document.querySelectorAll("div.note, div.alert");

注重
假如指定的挑选器不合法,则抛出一个SYNTAX_ERR 异常.
querySelectorAll()从WebApps API中引入.

WebKit 内核的浏览器有一个bug: 假如 selectors参数中包括 CSS伪类 ,返回的elementList包括一个<html> 元素,而不是空的.

2.你所不知道的

当代浏览器供应了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>

（1） document.querySelectorAll(“div”)返回页面中一切div元素构成的节点列表（NodeList范例的对象），而document.querySelector(“div.lonely”)返回一个零丁的div元素。

（2）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的子代元素。但是，它们返回了异常不一样的效果：

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。它们是querySelector和querySelectorAll的替换要领，存在DOM父节点上。它们也接收挑选器，但这些挑选器的剖析是相对于挪用这些要领的元素。不幸的是，这些要领越发模糊不清：MDN或caniuse.com里都没有说起它们，而且2015年6月18日的DOM4草案中也不见踪影。他们依然存在于一个较旧的版本中，于2014年二月4日，也出现在WHATWG 现存文档中。他们已被最少两个扩大兼容库完成：
• Dom4
• dom-elements
总的来说，DOM范例不是老是清楚清楚明了的。相识像这些坑很主要，由于从它们的行动中很难相识它们的本质特征。荣幸的是，你可以重写你的挑选器，所以没什么关联。假如你没法重写挑选器，这里会有一些完成库为你供应你要的当代API。别的，相似jQuery的库会为你供应一套稳固的友爱的接口来查找DOM元素。

    原文作者：specialCoder
    原文地址: https://segmentfault.com/a/1190000007198989
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞