如何在querySelectorAll中使用变量选择指定属性的HTML元素？

问题背景 #

你有一对从TEI文档<choice>标签转换而来的替代HTML元素，结构如下：

<a id="abc" choicePOS="sic0">Element1</a> <a id="xyz" choicePOS="corr0">Element2</a>

在Element1对应的JS函数里，你尝试选中并删除Element2，写了这段代码（el指代Element1）：

var choicePOS = el.getAttribute("choicePOS").slice(3); // 得到0
var corrID = "corr" + choicePOS; // 得到corr0
var corr = document.querySelectorAll("a[choicePOS=corrID]");

但代码失效了——原因确实是最后一行里的corrID被当成了字符串字面量，而非变量值。下面就来解决这个问题：

核心解决方案：把变量嵌入选择器字符串 #

当然可以在querySelectorAll的选择器中使用变量！你只需要把变量值正确插入到选择器字符串里，有两种常用写法：

写法1：模板字符串（推荐）

用反引号`包裹选择器，变量用${}嵌入，代码可读性更高：

var choicePOS = el.getAttribute("choicePOS").slice(3);
var corrID = "corr" + choicePOS;
// 用模板字符串把变量值插入属性选择器
var corr = document.querySelectorAll(`a[choicePOS="${corrID}"]`);
// 遍历删除选中的元素
corr.forEach(element => element.remove());

写法2：传统字符串拼接

如果需要兼容旧版浏览器，可以用加号拼接字符串：

var choicePOS = el.getAttribute("choicePOS").slice(3);
var corrID = "corr" + choicePOS;
var corr = document.querySelectorAll("a[choicePOS='" + corrID + "']");

替代方案 #

如果觉得字符串拼接麻烦，还有几种灵活的思路：

• 前缀+后缀匹配选择器：利用你的choicePOS命名规则（sicN/corrN），直接用属性选择器匹配前缀和数字后缀：

  var num = el.getAttribute("choicePOS").slice(3);
  var corr = document.querySelectorAll(`a[choicePOS^="corr"][choicePOS$="${num}"]`);
  

  其中^="corr"表示属性值以corr开头，$="${num}"表示以对应数字结尾。
• 遍历筛选元素：先选中所有带choicePOS属性的<a>，再筛选出目标元素：

  var choicePOS = el.getAttribute("choicePOS").slice(3);
  var corrID = "corr" + choicePOS;
  var allLinks = document.querySelectorAll("a[choicePOS]");
  var corr = Array.from(allLinks).filter(link => link.getAttribute("choicePOS") === corrID);
  

• 利用DOM相邻关系：如果两个替代元素始终相邻，可以直接用兄弟元素方法（更高效，但依赖DOM结构稳定）：

  var targetCorrId = "corr" + el.getAttribute("choicePOS").slice(3);
  var sibling = el.nextElementSibling;
  if (sibling && sibling.getAttribute("choicePOS") === targetCorrId) {
    sibling.remove();
  }
  

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