如何用JavaScript获取点击元素的子元素文本（动态DOM场景）

你只需要在找到.btn元素后，通过closest()方法定位到它所在的.box容器，再在容器内查询h1元素获取颜色文本即可。修改后的代码如下：

document.addEventListener("click", function(e){
    const CTABtn = e.target.closest(".btn"); 

    if(CTABtn){
      // 找到按钮所在的.box容器
      const box = CTABtn.closest(".box");
      // 在.box内找到h1元素并获取文本内容
      const colorText = box.querySelector("h1").textContent.trim();
      alert(colorText);
    }
});

完整可运行代码示例 #

<div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn">Blue</button>
    </div>
  </div>
</div>

<style>
.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}
</style>

<script>
document.addEventListener("click", function(e){
    const CTABtn = e.target.closest(".btn"); 

    if(CTABtn){
      const box = CTABtn.closest(".box");
      const colorText = box.querySelector("h1").textContent.trim();
      alert(colorText);
    }
});
</script>

关键逻辑说明 #

• closest(".box")：从点击的按钮元素向上遍历DOM树，找到最近的.box父容器，动态生成的DOM也能正常匹配
• querySelector("h1")：在.box容器范围内定位存储颜色文本的h1元素
• textContent.trim()：获取h1的文本内容并去除首尾空白字符，保证内容整洁

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