Javascript 问题。如何通过ID选择多个节点，其中ID以相同的单词开头？答案

【问题标题】：Javascript question. How to select multiple nodes by ID, where ID starts with the same word?Javascript 问题。如何通过ID选择多个节点，其中ID以相同的单词开头？
【发布时间】：2020-09-12 00:40:46
【问题描述】：

好的，这是我关于 SO 的第一个问题。所以我有以下html：

<div class="tables">
  <section id="table__1">
  </section>
  <section id="table__2">
  </section>
  <section id="table__3">
  </section>
</div>

我知道我可以使用getElementByID 或querySelector('#ID'); 选择这些部分。但是，如何仅通过所有这些部分都相同的 ID 的第一部分来选择所有这些部分。我试过document.querySelectorAll("section[id^="table__"]")，但没用。
我是不是把语法弄乱了，或者无论如何这都行不通？如果是这样，有没有办法做出这样的选择？

【问题讨论】：

首先，尝试在部分 ID 周围加上单引号。其次，您的代码示例中有单词tables（复数），但您的标记有单词table（单数）。示例：document.querySelectorAll("section[id^='table__']")
试试这个'[id^=table__]'
顺便说一句，我建议您重新考虑您的 HTML 方法，如果您可以控制的话。在大多数情况下，如果您按其他标准（例如类、标记名或“data-”属性）选择所有子项会更好。 ID 应该用于单数识别，而不是部分匹配选择的理想构造。

标签： javascript css-selectors getelementbyid

【解决方案1】：

您应该为您的选择器使用单引号，因为您不能在双引号内使用双引号。此外，您的选择器应该是 table__ 而不是 tables__：

document.querySelectorAll('section[id^="table__"]')

https://jsbin.com/ravecekiki/edit?html,js,console,output

【讨论】：

那个复数是一个错字，但是关于双引号内没有双引号的事实让我大吃一惊！在过去的 6 个月里，我一直在专门研究编码和 JS，但我从未偶然发现过这件事。谢谢！ PS。事实证明，在达到某个级别之前，我无法投票。
不用担心。如果您出于某种原因确实需要在双引号内使用双引号，可以通过使用像这样的 \ 字符转义内部双引号 document.querySelectorAll("section[id^=\"table__\"]")