Javascript 从嵌套的s访问包含唯一数据集属性的特定元素

我对HTML、CSS和JavaScript比较陌生。我正在构建一个应用程序，它有小提琴指板的示意图。通过HTML/CSS，它看起来不错。一切都反应迅速，可点击，事件运行良好。但是，我很难访问具有注释数据集的任何特定元素。当我的应用程序向一个函数发送一个note变量，该函数将发出注释时，我需要在注释上出现特定样式的元素。这不是对单击或悬停事件的响应-我正在播放预先编程的旋律

我试过这样的方法： document.querySelector[data note='G']

硬编码无效。说：

VM3877:1未捕获的DOMEException:未能对“文档”执行“querySelector”：“[dataset.note='G']”不是有效的选择器。从较旧的SO文章中获取此语法

最后，我想用插值代替G：

document.querySelector`[data note=${note}]`

但是，一旦我弄清楚如何查询并选择属性，我就不确定该使用何种语法。我应该补充的是，所有数据注释属性都是唯一的

这是我的HTML：

<div class="container">
<div class="violin">
  <div class="string">
    <div class="open-strings g-string" data-note="G3">G</div>
    <div class="note g-string" data-note="G#3">G#</div>
    <div class="note g-string" data-note="A3">A</div>
    <div class="note g-string" data-note="Bb3">Bb</div>
    <div class="note g-string" data-note="B3">B</div>
    <div class="note g-string" data-note="C4">C</div>
    <div class="note g-string" data-note="C#4">C#</div>
    <div class="note g-string" data-note="D4">D</div>
  </div>
  <div class="string">
    <div class="open-strings d-string" data-note="D4">D</div>
    <div class="note d-string" data-note="Eb4">Eb</div>
    <div class="note d-string" data-note="E4">E</div>
    <div class="note d-string" data-note="F4">F</div>
    <div class="note d-string" data-note="F#4">F#</div>
    <div class="note d-string" data-note="G4">G</div>
    <div class="note d-string" data-note="G#4">G#</div>
    <div class="note d-string" data-note="A4">A</div>
  </div>
  <div class="string">
    <div class="open-strings a-string" data-note="A4">A</div>
    <div class="note a-string" data-note="Bb4">Bb</div>
    <div class="note a-string" data-note="B4">B</div>
    <div class="note a-string" data-note="C5">C</div>
    <div class="note a-string" data-note="C#5">C#</div>
    <div class="note a-string" data-note="D5">D</div>
    <div class="note a-string" data-note="D#5">D#</div>
    <div class="note a-string" data-note="E5">E</div>
  </div>
  <div class="string">
    <div class="open-strings e-string" data-note="E5">E</div>
    <div class="note e-string" data-note="F5">F</div>
    <div class="note e-string" data-note="F#5">F#</div>
    <div class="note e-string" data-note="G5">G</div>
    <div class="note e-string" data-note="G#5">G#</div>
    <div class="note e-string" data-note="A5">A</div>
    <div class="note e-string" data-note="Bb5">Bb</div>
    <div class="note e-string" data-note="B5">B</div>
  </div>
</div>

我也尝试过获得一个父元素，比如.VINOR或4.string节点，并可能进行迭代和查找，但找不到获取所需元素的方法。我尝试过使用dataset，但这需要获取特定的类，例如.open string g-string或.note g-string。我只想直接进入具有唯一属性的元素！这可能吗

提前感谢您的指导

您需要使用document.querySelector[data note*='G']。这很好用

document.querySelector[data note*='G'].style.color=橙色；

---

G第一个选择器完全有效；现在是一个很好的例子！！我不知道为什么会出现这样的错误，但我打开了一个新的控制台，粘贴了我的代码，得到了我想要的——没有混乱，没有大惊小怪。现在我只需要弄清楚如何在插值中工作。如果你想发布你的答案，我很乐意投票！使用absolute=in选择器进行精确匹配没有问题，这似乎是OP想要的。我尝试了它。运行了它，它不起作用：在上面的jsFiddle链接中效果很好。谢谢-我从我尝试的内容中切换了单引号和双引号，这就解决了问题。太多了！！！现在开始插值变量！嗯，我明白了。是的，它应该能用。但是属性选择器*也很好。