JavaScript中无需两次链式调用parentElement获取祖父元素的方法有哪些？

首选方案：使用Element.closest() #

Element.closest() 是DOM原生提供的方法，接收一个CSS选择器作为入参，会从当前元素开始向上遍历所有祖先节点，返回第一个匹配选择器的元素。这种方式完全可以替代固定层级的parentElement链式调用，尤其适配你动态注入代码的场景：就算后续页面中间层级的DOM结构发生调整，只要目标祖父元素的选择器特征不变，代码就可以正常运行，鲁棒性远高于硬写两次parentElement。

针对你的示例代码，修改后的JS逻辑如下：

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

body.querySelector('button').addEventListener('click', function() {
  // 直接匹配类名为parent1的祖先元素
  this.closest('.parent1').classList.toggle('black');
});

备选方案：封装层级父元素获取工具函数 #

如果你不需要依赖祖先元素的特征，仅明确需要向上获取第N级父元素，可以封装通用工具方法：

/**
 * 获取元素的第N级父元素
 * @param {Element} el 起始DOM元素
 * @param {Number} n 父级层级，n=1为直接父元素，n=2为祖父元素
 * @returns {Element|null} 匹配到的父元素，超出DOM根节点返回null
 */
function getNthParent(el, n) {
  let currentNode = el;
  for (let i = 0; i < n && currentNode; i++) {
    currentNode = currentNode.parentElement;
  }
  return currentNode;
}

调用示例：

const grandParent = getNthParent(this, 2);
grandParent.classList.toggle('black');

方案对比 #

• Element.closest() 兼容性覆盖IE9及以上所有主流浏览器，无需额外封装，是动态DOM场景下的首选实现
• 自定义工具函数仅适用于没有明确祖先元素选择器、仅依赖层级的特殊场景

内容的提问来源于stack exchange，提问作者xander17