javascript - 使用 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

不幸的是，仅对于 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>