如何使用XPath选取ID以指定前缀开头的锚元素href属性？

当然可以！根据你描述的场景，有几种简单可靠的方法能轻松选中所有ID以foo_为前缀的<a>元素，并提取它们的href属性，我给你列几个最常用的方案，适配不同的使用场景：

1. 原生JavaScript（无框架依赖） #

直接用浏览器原生的document.querySelectorAll结合属性前缀选择器就能搞定，^=表示属性值以指定字符串开头：

// 选中所有符合条件的锚元素
const fooAnchors = document.querySelectorAll('a[id^="foo_"]');

// 把NodeList转成数组，再提取每个元素的href
const hrefList = Array.from(fooAnchors).map(anchor => anchor.href);

console.log(hrefList); // 输出所有匹配的href值

2. jQuery（如果项目已引入jQuery） #

如果你的项目用了jQuery，代码会更简洁，同样用属性前缀选择器：

// 提取所有匹配元素的href到数组
const hrefList = $('a[id^="foo_"]').map(function() {
  return this.href;
}).get();

3. XPath（爬虫/浏览器控制台场景） #

如果是在爬虫脚本或者浏览器控制台用XPath的场景，可以直接用starts-with()函数定位元素并提取属性：

const xpathResult = document.evaluate(
  '//a[starts-with(@id, "foo_")]/@href',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

// 遍历结果集输出href
for (let i = 0; i < xpathResult.snapshotLength; i++) {
  console.log(xpathResult.snapshotItem(i).value);
}

这些方法的兼容性都非常好，不管是现代浏览器还是相对旧的版本（除了极个别远古IE，现在基本不用考虑），都能稳定工作。

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