如何通过点击div内button获取对应div下a标签的href属性

下面提供几种实用的实现方式，根据你的元素生成场景选择：

方法一：事件委托（推荐用于动态生成的元素） #

这种方式通过将事件绑定到父容器，利用事件冒泡机制处理点击，即使后续动态新增元素也能生效，性能更优。

示例代码： #

HTML结构（循环生成的组）

<div class="item-group">
  <a href="link1.html" class="item-link">链接1</a>
  <button class="get-href-btn">获取链接</button>
</div>
<div class="item-group">
  <a href="link2.html" class="item-link">链接2</a>
  <button class="get-href-btn">获取链接</button>
</div>

JavaScript代码

// 绑定事件到父容器（建议用最接近的父元素，比如包裹所有.item-group的容器，这里用document示例）
document.addEventListener('click', function(e) {
  // 判断点击的是目标按钮
  if (e.target.matches('.get-href-btn')) {
    // 找到当前按钮所在的分组容器，再获取里面的a标签href
    const targetLink = e.target.closest('.item-group').querySelector('.item-link');
    const href = targetLink.href;
    console.log('获取到的链接：', href);
    // 这里可以添加你的业务逻辑，比如复制链接、跳转等
  }
});

closest() 方法会向上查找最近的匹配父元素，比多次调用 parentNode 更灵活，适配不同的嵌套结构。

方法二：直接给按钮绑定事件（适合静态生成的元素） #

如果所有元素都是页面加载时就存在的静态内容，可以直接遍历按钮绑定点击事件：

// 获取所有目标按钮
const buttons = document.querySelectorAll('.get-href-btn');

buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过父节点找到同组的a标签
    const href = this.parentNode.querySelector('.item-link').href;
    console.log('获取到的链接：', href);
  });
});

注意：如果元素是后续动态生成的（比如通过AJAX加载、JS动态渲染），这种方式绑定的事件会失效，因为绑定操作在元素生成前就执行了。

框架场景下的实现（以Vue为例） #

如果你用Vue这类前端框架，不需要操作DOM，直接通过绑定的数据获取即可，更符合框架开发逻辑：

<template>
  <div 
    v-for="(linkItem, index) in linkList" 
    :key="index" 
    class="item-group"
  >
    <a :href="linkItem.href" class="item-link">{{ linkItem.text }}</a>
    <button @click="handleGetHref(linkItem.href)">获取链接</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkList: [
        { href: 'link1.html', text: '链接1' },
        { href: 'link2.html', text: '链接2' }
      ]
    };
  },
  methods: {
    handleGetHref(href) {
      console.log('获取到的链接：', href);
      // 执行你的业务逻辑
    }
  }
};
</script>

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