无法用 JS 理解这个 DOM 目标 [重复]答案

【问题标题】：Can not understand this DOM target with JS [duplicate]无法用 JS 理解这个 DOM 目标 [重复]
【发布时间】：2018-10-01 04:36:47
【问题描述】：

我正在尝试定位这些元素：

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>

所以我正在尝试使用此代码来播放它们：

 window.addEventListener('keydown', function(e){
 const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

 console.log(audio);
 if(!audio) return; // stop function
 audio.play();
 });

然而，当按下 A 时，数据键返回 Null。控制台是这样说的：

KeyboardEvent {isTrusted: true, key: "a", code: "KeyA", location: 0, 
ctrlKey: false, …}
index-START.html:65 Uncaught TypeError: Cannot read property 'play' of null
at index-START.html:65

所以我知道我不工作，因为它是空的。但我不明白为什么它是 Null。

【问题讨论】：

标签： javascript dom

【解决方案1】：

欢迎使用 StackOverflow。

您需要在该字符串周围使用字符串插值符号 ( ` ) 才能正确执行 ${...} 替换：

`audio[data-key="${e.keyCode}"]`

否则，选择器查询将接收试图匹配数据键等于"${e.keyCode}" 的元素的文字字符串。这称为“模板文字”，您可以阅读更多关于细微差别here。

或者，您可以这样做以避免使用模板文字并坚持使用标准引号：

'audio[data-key="' + e.keyCode + '"]'

【讨论】：

现在可以使用了，谢谢！下次我会坚持使用标准报价！
如果您想支持 IE 浏览器，那是个好主意。我们只在服务器 (node.js) 上使用模板文字，我们可以在其中控制我们使用的 JavaScript 版本。

【解决方案2】：

您在查询选择器中犯了一个小错误，您没有使用文字字符串。

' 应该是 `

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

【讨论】：