如何用JS查找目标元素所在div及同div内其他元素的类？

问题1：定位按钮所在的div #

用Element.closest()方法就能搞定，它会从当前元素向上遍历DOM树，找到最近的匹配选择器的祖先元素，哪怕是多层嵌套结构也能精准定位。如果目标div有固定id，也可以用closest('#1')来精准匹配。

问题2：获取同一div内的其他元素类名 #

拿到父div后，先获取它的所有直接子元素，再过滤掉当前点击的按钮，最后提取剩余元素的类名即可。

修改后的完整代码 #

const wrapper = document.getElementById('1');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  console.log("something was clicked00");
  if (!isButton) {
    console.log("it's not a button");
    return;
  }

  // 获取按钮所在的div
  const parentDiv = event.target.closest('div');
  if (parentDiv) {
    console.log("按钮所在的div：", parentDiv);
    console.log("div的ID：", parentDiv.id);
    console.log("div的类名：", parentDiv.className);
  }

  // 获取同一div内其他元素的类名
  if (parentDiv) {
    // 把div的子元素转为数组，方便后续处理
    const allChildren = Array.from(parentDiv.children);
    // 过滤掉当前点击的按钮
    const otherElements = allChildren.filter(el => el !== event.target);
    // 提取其他元素的类名
    const otherElementClasses = otherElements.map(el => el.className);
    console.log("同一div内的其他元素类名：", otherElementClasses);
  }
});

关键方法说明 #

• closest('div')：不管嵌套多少层，都能快速找到当前元素最近的div祖先。
• parentDiv.children：获取div下的所有直接子元素（不含文本节点），转为数组后可使用filter、map等数组方法处理。
• filter+map：前者用来排除当前点击的按钮，后者用来提取剩余元素的类名，是处理DOM元素列表的常用组合。

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