纯Javascript的.closest（）返回null

Question

来自vanilla javascript的内置函数.closest（），在Firefox和Chrome上支持返回null。我也没有在这个项目中使用jQuery而且它不是一个选项。

var parent = document.querySelector(".image").closest(".container")
  // I know that this will only use the first element.
console.log(parent) // null

<div class="container">
  <img class="image" src="./images/bike.jpg" alt="">
</div>
<div class="container">
  <img class="image" src="./images/sea.jpg" alt="">
</div>

我使用的是最新版本的Firefox Developer Edition。

以下是有关该功能的MDN页面：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

如果有一个我可以使用的polyfill而不是那个，我们也会感激。

Answer 1

flex从您选择的DOM元素中向上搜索。

由于容器是第一个元素，因此找不到任何东西。

Answer 2

.closest() 

只搜索父节点直到 DOM 根。如果节点不是父节点之一，则无法工作。