javascript - querySelector 在没有 jQuery 的情况下选择最近的祖先

Question

<style type="text/css">
.card{
    background:green;
}
</style>
<div class="card">
    inside first
    <div class="card" id="tryingtoselectthis">
        inside second
        <div class="card" id="myselector">
            inside third
        </div>
    </div>
</div>

<script type="text/javascript">
    console.log(document.querySelector("#myselector").closest(".card"));
</script>

我试图仅使用该类使用 .myselector 选择器来选择 #tryingtoselectthis 。请注意，同一类(class)的 child 数量没有限制，我只想选择上面的同一类(class)的家长。

parentNode 不起作用。并且，需要使用其类名来选择节点。

没有 jQuery

Answer 1

你已经快完成了，但如果你不希望最初选择的元素成为可能的结果，则必须在其父元素上调用 closest ，而不是在所选元素上.

console.log(document.querySelector("#myselector").parentElement.closest(".card").id);

.card {
  background: green;
}

<div class="card">
  inside first
  <div class="card" id="tryingtoselectthis">
    inside second
    <div class="card" id="myselector">
      inside third
    </div>
  </div>
</div>

请注意，像 IE 这样的古老浏览器将需要 polyfill。

Element.closest()