如何用document.querySelectorAll匹配含指定查询串的链接并设置属性？

架构老林

2026-5-6

解决Adobe DTM中批量设置链接属性的问题

针对你遇到的批量设置链接在新标签页打开的需求，我给你提供两种可行的解决方案，应该能解决你之前尝试失败的问题：

方案一：使用CSS属性选择器匹配所有前缀匹配的链接

你的原代码里有个小拼写错误（querySelectorALL应该是querySelectorAll，注意最后一个L是小写），这可能是之前失败的原因之一。另外，要匹配所有以/one2one/r/Data/Quote/开头的链接，我们可以用^=属性选择器，它能匹配属性值以指定字符串开头的元素。

修正后的代码如下：

// 选中所有href以指定路径开头的a标签
var els = document.querySelectorAll("a[href^='/one2one/r/Data/Quote/']"); 
for (var i = 0; i < els.length; i++) { 
  els[i].setAttribute("target", "_blank"); 
}

这个方案的好处是不需要手动维护链接列表，只要链接符合前缀规则就会被自动选中，非常适配你的场景。

方案二：手动维护链接列表数组

如果你更倾向于明确指定需要处理的链接路径，可以用数组来维护，然后循环处理每个路径对应的链接。注意要确保数组里的路径和页面上的href完全一致，同时修正拼写错误：

// 手动维护需要处理的链接路径数组
var targetPaths = [
  "/one2one/r/Data/Quote/",
  "/one2one/r/Data/Quote/business/",
  "/one2one/r/Data/Quote/commercial/",
  // 在这里添加其他需要的链接路径
];

// 循环数组，处理每个路径对应的链接
targetPaths.forEach(function(path) {
  var links = document.querySelectorAll("a[href='" + path + "']");
  for (var i = 0; i < links.length; i++) {
    links[i].setAttribute("target", "_blank");
  }
});

这个方案适合需要精确控制哪些链接被处理的场景，能避免误匹配其他类似前缀的链接。