javascript - 选择元素父级的父级

Question

我想在 Javascript 中选择子对象的父对象的父对象，而无需将相同的方法链接两次:child.parentElement.parentElement。有这样的方法吗？我要选择的元素是 parent1。

代码只是为了说明问题，但我只想知道是否有一种方法可以替代 .parentElement.parentElement。我需要这样选择它，因为我的代码是动态引入到页面中的。

这是说明问题的代码:

const body = document.querySelector('body');

body.querySelector('button').addEventListener('click', function() {
  this.parentElement.parentElement.classList.toggle('black');
});

.parent1 {
  background: yellow;
  padding: 20px;
}

.parent2 {
 background: blue;
 padding: 20px;
}

.black {
 background: black;
}

<div class="parent1">
  <div class="parent2">
    <button>Click</button>
  </div>
</div>

Answer 1

您可以使用Element.closest()查找与选择器匹配的第一个父元素，在我们的例子中为 .parent1:

const body = document.querySelector('body');

body.querySelector('button').addEventListener('click', function() {
  this.closest('.parent1').classList.toggle('black');
});

.parent1 {
  background: yellow;
  padding: 20px;
}

.parent2 {
 background: blue;
 padding: 20px;
}

.black {
 background: black;
}

<div class="parent1">
  <div class="parent2">
    <button>Click</button>
  </div>
</div>