如何在HTML与原生JS（无jQuery）中获取类元素的父元素ID

没问题，这事儿用原生HTML和JavaScript完全能搞定，我给你拆解成具体步骤和代码示例：

第一步：先准备示例HTML结构 #

假设我们有这样的DOM结构，目标是获取所有带.target-class类的元素的父元素ID：

<div id="parent-container-1">
  <p class="target-class">这是第一个目标元素</p>
</div>
<div id="parent-container-2">
  <span class="target-class">这是第二个目标元素</span>
</div>
<!-- 这个父元素没有ID，用来测试边界情况 -->
<div>
  <div class="target-class">这是第三个目标元素</div>
</div>

第二步：用原生JS实现获取逻辑 #

情况1：获取所有指定类元素的父元素ID #

如果页面中存在多个带目标类的元素，我们可以用document.querySelectorAll()拿到所有匹配元素，再逐个处理：

// 1. 获取所有带有target-class类的元素
const targetElements = document.querySelectorAll('.target-class');

// 2. 遍历每个目标元素，处理父元素ID
targetElements.forEach(element => {
  // 获取当前元素的直接父元素
  const parent = element.parentElement;
  
  // 先判断父元素是否存在，避免报错
  if (parent) {
    if (parent.id) {
      console.log(`当前元素的父元素ID：${parent.id}`);
      // 这里可以把ID存到数组里，或者做其他业务操作
    } else {
      console.log('当前元素的父元素没有设置ID');
    }
  } else {
    console.log('当前元素没有父元素（这种情况很少见，除非是html根节点）');
  }
});

情况2：只获取第一个指定类元素的父元素ID #

如果只需要处理第一个匹配的元素，用document.querySelector()更高效：

// 1. 获取第一个带target-class类的元素
const firstTarget = document.querySelector('.target-class');

if (firstTarget) {
  // 使用可选链操作符（?.）简化判断，避免父元素不存在时报错
  const parentId = firstTarget.parentElement?.id;
  
  if (parentId) {
    console.log('第一个目标元素的父元素ID：', parentId);
  } else {
    console.log('第一个目标元素的父元素无ID或不存在');
  }
} else {
  console.log('页面中没有找到带target-class类的元素');
}

关键知识点说明 #

• document.querySelectorAll('.类名')：返回所有匹配指定类的元素集合，适合处理多个元素的场景。
• document.querySelector('.类名')：返回第一个匹配指定类的元素，适合单个元素的场景。
• element.parentElement：获取当前元素的直接父元素，如果需要获取祖先元素（不是直接父级），可以用element.closest('选择器')，比如找最近的带ID的父元素可以写element.closest('[id]')?.id。
• 可选链操作符（?.）：ES6+的语法，用来避免访问不存在的属性时报错，代码更简洁。

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