如何不使用jQuery，用原生JavaScript获取被点击的HTML <a> 标签的内容值？

实现核心逻辑非常简单，注意两个关键点就行：一是只锁定目标表格范围内的a标签，别把页面其他地方的a绑进来；二是要稳定拿到当前点击元素的文本值，不出现取值不准的问题。

修正原有代码的选择范围问题 #

你之前写的var list = document.getElementsByTagName("a");抓取的是全页面所有a标签，如果页面后续加了其他链接，会出现误绑。我们可以先通过表格的内联样式定位到当前目标表格，再在表格内部抓取a标签集合，从根源上缩小选择范围：

// 匹配设置了width:100%样式的目标表格
const targetTable = document.querySelector('table[style*="width:100%"]');
// 仅获取该表格内部的所有a标签，不会碰页面其他位置的a元素
const tableAList = targetTable.getElementsByTagName('a');

绑定点击事件并取值 #

提供两种可直接落地的实现方案，按需选就行：

方案1：逐个绑定a标签监听 #

适合表格内容固定、不会动态增删行的场景，注意循环变量用let代替var，避免旧代码常见的闭包问题：

for (let i = 0; i < tableAList.length; i++) {
  tableAList[i].addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为，避免后续给a加href时页面意外跳转
    e.preventDefault();
    // 提取当前点击a标签的文本内容，trim()去掉前后冗余空格
    const clickContent = this.textContent.trim();
    // 这里写你的后续业务逻辑，比如判断用户点了哪个字段、传参给后端等
    console.log('当前点击的a标签值：', clickContent);
  })
}

方案2：事件委托实现（更推荐） #

只给表格本身绑一次监听，哪怕后续动态往表格里加行、加a标签，也不需要重新绑定事件，代码量更少，性能更好：

targetTable.addEventListener('click', function(e) {
  // 判断实际触发点击的元素是不是a标签
  if (e.target.tagName.toLowerCase() === 'a') {
    e.preventDefault();
    const clickContent = e.target.textContent.trim();
    console.log('当前点击的a标签值：', clickContent);
  }
})

常见踩坑提醒 #

• 别直接拿全局的a标签集合做绑定，否则页面其他位置的a标签点击也会触发你的业务逻辑，出现误判。
• 提取内容优先用textContent，不要用innerHTML，避免a标签内部如果嵌套其他子元素时拿到带HTML标签的冗余内容。

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