如何使用原生JavaScript获取点击子元素对应的父级div的ID？

嘿，我明白你的需求啦——你点击<h2>（First Div/Second Div）的时候，想拿到最外层那个id="myId"的div的ID。你现在的代码alert(e.target.id)只会拿到点击元素本身的ID，但你的<h2>并没有设置ID，所以肯定得不到想要的结果。下面给你两种原生JS的实现方式：

方法1：用closest()快速定位（推荐） #

closest()方法可以从当前点击的元素开始，向上遍历DOM树，找到第一个匹配指定选择器的祖先元素，非常适合这种场景：

document.onclick = function(e) {
  // 查找最近的id为myId的祖先元素
  const parentContainer = e.target.closest('#myId');
  if (parentContainer) {
    alert(parentContainer.id); // 弹出"myId"
  }
};

为什么这个方法好用？ #

• 不管你的<h2>和目标容器之间隔了多少层DOM，它都能直接定位到目标，不用手动一层一层找父节点。
• 主流浏览器（Chrome、Firefox、Edge等）都支持这个方法，兼容性没问题。

方法2：手动遍历父节点（兼容旧浏览器） #

如果需要兼容非常老旧的浏览器（比如IE11之前的版本），可以用循环手动向上遍历父节点：

document.onclick = function(e) {
  let currentEl = e.target;
  // 向上遍历直到找到目标容器或者到达DOM根节点
  while (currentEl && currentEl.id !== 'myId') {
    currentEl = currentEl.parentNode;
  }
  // 找到目标后弹出ID
  if (currentEl) {
    alert(currentEl.id);
  }
};

这个方法的逻辑很直观：从点击的元素开始，一层一层往上找父节点，直到找到id为myId的元素为止。

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