新鲜的querySelector和querySelectorAll

2024年4月29日 137次阅读 来源: 痕迹绝陌路

W3C在07年的Selectors API中新增了两个API —— querySelector和querySelectorAll。这两个API在文档中的形貌以下：

partial interface Document {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};

partial interface DocumentFragment {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};

partial interface Element {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};

从接口定义中就能够看出，Document，DocumentFragment和Element都支撑querySelector和querySelectorAll。个中querySelector返回的是单个元素，而querySelectorAll返回的是婚配到的一切DOM构成的NodeList。

设想一下下面的HTML构造：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="container" class="container">
    <div class="name">Lever</div>
    <div class="content">
      <div>Hello World!</div>
    </div>
  </div>
</body>
</html>

如今试着用querySelector和querySelectorAll来处置惩罚DOM。

const container = document.querySelector("#container")
const name1 = container.querySelector(".name").innerText
const name2 = document.querySelector("#container > .name").innerText
console.log(name1, name2) // Lever Lever

这里分别在”#container”这个元素和document上挪用了querySelector,能够看出，运用在Element上的querySelector是被限定在该Element的范围内的，而在document上挪用的querySelector则会在全局中寻觅相符前提的元素。

const name3 = container.querySelector(".container > .name").innerText

如今猜猜，name3会输出什么。假如常常运用jQuery的话，很轻易以为如许的选择器不会婚配到任何DOM，由于在“#container”的子元素中没有婚配的DOM。但效果实际上是选择器准确的拿到了我们要找的DOM，name3的值为“Lever”。

不要疑心，这不是浏览器的bug，范例中是如许形貌的：

Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document. In the following example, the method will still match the div element’s child p element, even though the body element is not a descendant of the div element itself.

var div = document.getElementById("bar");
var p = div.querySelector("body p");

根据范例的意义，在Element下的querySelector一样会在全部document下寻觅相符前提的选择器，然后才会将效果中属于Element子树的DOM截取出来。

如许看来，也就能解释为何猎取name3的选择器仍然会起作用了。

还需要注意的是，经由过程querySelectorAll拔取出来的NodeList是静态的，因而任何对DOM的增编削的操纵，不会影响到已查询出来的NodeList的效果。

与本文的相干代码都放到了JSBin上。

参考资料：Selectors API Level 1

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