javascript - 如何通过JavaScript爬到特定的父元素？

Question

我有一个小的 html 代码如下:

<div class="main">
  <div class="comments">
    <div class="insider">
      <div class="text">
        some text
      </div>
    </div>
  </div>
</div>

我目前在 const ele = document.querySelector(".text") 并且我希望从上述元素动态上升，直到我到达一个名称为“comments”的类而且不会比那更远。

我如何使用 querySelector 通过 vanilla JavaScript 实现这一点？

Answer 1

您不能使用 document.querySelector() 从子元素移动到父元素。但是，有多种方法可以选择元素的父元素。

您可以使用 Element.closest()使用指定的 CSS 选择器获取最近的祖先元素的方法。

document.querySelector(".text").closest('.comments');

.closest() 方法将遍历 .text 元素及其祖先元素(朝向文档根)，直到找到与提供的 CSS 选择器匹配的节点.

如果调用 .closest() 方法的元素与提供的 CSS 选择器匹配，则返回该元素，否则 .closest() 方法返回匹配祖先或 null 如果未找到匹配项。