使用 querySelectorAll 按标题选择多个项目

Question

我正在尝试使用 document.querySelectorAll 选择多个项目并通过它们的 html title 获取元素。

我还需要在我的查询中插入多个选择器：我有一个带有n 元素的向量，每个都是我需要选择的title。

我已经关注了这个答案：Select an element by title with JavaScript and modify it? 但没有任何成功。

我设法使它起作用，但仅适用于单个元素。

1)Html

<div id="pad">
    <ol class="even first">
        <li class='hex' title="C2">
            <div class="note">C2</div>
        </li>
        <li class='hex' title="G2">
            <div class="note">G2</div>
        </li>
        <li class='hex' title="D3">
            <div class="note">D3</div>
        </li>
        <li class='hex' title="A3">
            <div class="note">A3</div>
        </li>
        <li class='hex' title="E4">
            <div class="note">E4</div>
        </li>
    </ol>
    <ol class="odd">
        <li class='hex' title="A1">
            <div class="note">A1</div>
        </li>
        <li class='hex' title="E2">
            <div class="note">E2</div>
        </li>
        <li class='hex' title="B2">
            <div class="note">B2</div>
        </li>
        <li class='hex' title="Gb3">
            <div class="note">Gb3</div>
        </li>
        <li class='hex' title="Db4">
            <div class="note">Db4</div>
        </li>
        <li class='hex' title="Ab4">
            <div class="note">Ab4</div>
        </li>
    </ol>
    <ol class="even">
        <li class='hex' title="Db2">
            <div class="note">Db2</div>
        </li>
        <li class='hex' title="Ab2">
            <div class="note">Ab2</div>
        </li>
        <li class='hex' title="Eb3">
            <div class="note">Eb3</div>
        </li>
        <li class='hex' title="Bb3">
            <div class="note">Bb3</div>
        </li>
        <li class='hex' title="F4">
            <div class="note">F4</div>
        </li>
    </ol>

这是一个六边形音乐键盘的 html。

2)javascript

notes = ['C2','E2','G2']
keys = document.querySelectorAll(".hex"); //this works fine
//correctly select the single node with title = 'C2'
selected_notes = document.querySelectorAll('[title="C2"]');

如何在查询中“插入”我的数组以选择标题为 C2、E2 或 G2 的所有元素？

我想做这样的事情：

selected_notes = document.querySelectorAll('[title=notes]'); //obviously this doesn't work 

有可能吗？或者我必须对 notes 数组的每个元素迭代一个查询？

Answer 1

实现这一点的一种方法是group selectors into one rule，为"title" 属性的每个目标值分离不同的选择器，如下所示：

[title="C2"], [title="E2"], [title="G2"]

上面的选择器将实现以下结果（选择可视化，粉红色背景应用于所选节点）：

const nodes = document.querySelectorAll('[title="C2"], [title="E2"], [title="G2"]');

for(const node of nodes) {
  node.style.background = "pink";
}

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>

Answer 2

对于querySelectorAll，不幸的是，您必须写出每个可能的标题属性，并将其放入查询字符串中：

const selected_notes = document.querySelectorAll('[title="C2"], [title="E2"], [title="G2"]');
console.log(selected_notes);

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>  

为了让事情更干，我会.map 一个你想要元素的标题数组：

const notes = ['C2','E2','G2'];
const selected_notes = notes.map(title => document.querySelector(`[title="${title}"]`));
console.log(selected_notes);

<div id="pad">
  <ol class="even first">
    <li class='hex' title="C2"><div class="note">C2</div></li>
    <li class='hex' title="G2"><div class="note">G2</div></li>
    <li class='hex' title="D3"><div class="note">D3</div></li>
    <li class='hex' title="A3"><div class="note">A3</div></li>
    <li class='hex' title="E4"><div class="note">E4</div></li>
  </ol>  
  <ol class="odd">
    <li class='hex' title="A1"><div class="note">A1</div></li>
    <li class='hex' title="E2"><div class="note">E2</div></li>
    <li class='hex' title="B2"><div class="note">B2</div></li>
    <li class='hex' title="Gb3"><div class="note">Gb3</div></li>
    <li class='hex' title="Db4"><div class="note">Db4</div></li>
    <li class='hex' title="Ab4"><div class="note">Ab4</div></li>
  </ol>
  <ol class="even">
    <li class='hex' title="Db2"><div class="note">Db2</div></li>
    <li class='hex' title="Ab2"><div class="note">Ab2</div></li>
    <li class='hex' title="Eb3"><div class="note">Eb3</div></li>
    <li class='hex' title="Bb3"><div class="note">Bb3</div></li>
    <li class='hex' title="F4"><div class="note">F4</div></li>
  </ol>