奇怪的querySelector和querySelectorAll

klinson 发布于2019-08-20 14:18 / 3369人阅读

摘要：在年的中新增了两个和。其中返回的是单个元素，而返回的是匹配到的所有组成的。这里分别在这个元素和上调用了可以看出，使用在上的是被限制在该的范围内的，而在上调用的则会在全局中寻找符合条件的元素。但结果其实是选择器正确的拿到了我们要找的，的值为。

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结构：




  
  
  JS Bin


  
    Lever
    
      Hello World!

现在试着用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

云服务器 GPU云服务器那些奇怪的错误奇怪的编程语言奇怪的创意人 querySelector

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81522.html

你所不了解的querySelector

摘要：而事实上，它会在的子代元素中匹配查询条件。它们并不会相对于任何特定的元素，甚至不会相对于调用的元素。伪选择器是相对当前作用域进行匹配的。它们是和的替代方法，存在父节点上。了解像这些坑很重要，因为从它们的行为中很难了解它们的实质特性。原文链接地址：http://blog.lxjwlt.com/front-...笔者整理笔记： 1.API介绍先看看MDN上怎么介绍这个API的：概述返回...

freewolf 2019-08-20 11:39 评论0 收藏0
获取网页指定元素的原生方法回顾

摘要：浏览器原生提供的几个找到元素的方法为网页全局唯一。匹配包含的元素匹配包含和的元素级联用法和相似返回一个。以上返回数组的方法，返回的都是的。那是个夜黑风高的夜晚，我遇到了一个按钮：搜索嗯，我要选中它，我敲下了一行代码： const submitButton = document.querySelector(button[type=submit]); 这对于精通 document.q...

URLOS 2019-08-21 17:02 评论0 收藏0
JavaScript DOM扩展——“选择符API和元素遍历”的注意要点

摘要：实际上，的核心就是通过选择符查询文档取得元素的引用。方法该方法接收一个选择符，返回的是所有匹配的元素而不仅仅是一个元素。而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。选择符API Selector API Level1 的核心就是两个方法：querySelector()和querySelectorAll()。实际上，jQuery的核心就是通过CSS选择符查询D...

justCoding 2019-08-19 17:13 评论0 收藏0
通过DOM API 查找节点

摘要：我们可以通过来检查某个节点是否有子节点。通过可以用来取得父元素，返回值可能会是一个元素节点根节点或节点。与类似，通过可以取得同层之间的下一个节点，如果已经是最后一个节点，则返回。在上一篇的分享当中，我们简单介绍了BOM 与DOM，也了解到JavaScript 是怎么通过它们提供的方法来与浏览器进行沟通。当一个网页被载入到浏览器时，浏览器会首先分析这个HTML 文档，然后会依照这份HTML ...

shengguo 2019-05-23 17:26 评论0 收藏0