如何使用JavaScript查找所有href属性以tel开头的a标签元素

你可以通过以下两种原生JS方案筛选符合要求的元素，同时可直接在查询后绑定事件监听器：

方案1：属性选择器直接匹配（推荐） #

使用CSS前缀属性选择器配合querySelectorAll，一行代码即可完成筛选，兼容所有现代浏览器：

// 直接匹配所有href属性以tel:开头的a标签
const telLinks = document.querySelectorAll('a[href^="tel:"]');

// 批量绑定点击事件示例
telLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 此处添加自定义逻辑，比如点击埋点、号码格式化等
    console.log('触发拨号链接点击，号码为：', this.href.replace('tel:', ''));
  });
});

语法说明：[href^="tel:"]中的^=是CSS属性前缀匹配规则，专门用于筛选属性值以指定字符串开头的元素，完全匹配你的需求场景。

方案2：全量a标签遍历筛选（旧环境兼容） #

如果需要兼容不支持querySelectorAll的极端旧运行环境，可以先获取所有a标签再手动过滤：

const allAnchorTags = document.getElementsByTagName('a');
const telLinkList = [];

for (let i = 0; i < allAnchorTags.length; i++) {
  const currentHref = allAnchorTags[i].getAttribute('href') || '';
  // 匹配href以tel:开头的元素
  if (currentHref.startsWith('tel:')) {
    telLinkList.push(allAnchorTags[i]);
    // 可直接在此处绑定事件
  }
}

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