javascript - 选择一个元素的父元素的父元素

Question

我想在 Javascript 中选择一个 child 的父级的父级而不将相同的方法链接两次:child.parentElement.parentElement.Is there a method for this？我要选择的元素是 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>