javascript - 选择元素的父级的父级

Question

我想在 Javascript 中选择孩子的父母的父母，而不用两次链接相同的方法：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>