第二卷滑块，HTML集合与节点列表
尝试将查询选择器更改为仅返回accet节拍的音频标签，而为其他滑块保留反向循环。
当我更换
时，重大变化似乎就来了const players = document.querySelectorAll("audio");
使用
var x = document.getElementsByClassName("accent");
将players与x进行比较时，我看到的唯一区别是 html集合与 nodelist 。我应该尝试将其转换为节点列表吗？
W3建议我仍然可以按className分隔它们，但是我不确定如何。
JavaScript
window.addEventListener("keypress", playSound);
const keys = Array.from(document.querySelectorAll(".key"));
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
const players = document.querySelectorAll("audio");
var x = document.getElementsByClassName("accent");
const volumeControl = document.getElementById("accent-control");
// const loopVolume = document.getElementById("backloop-control");
let globalVolume = 1;
function removeTransition(e) {
if (e.propertyName !== "transform") return;
e.target.classList.remove("playing");
}
volumeControl.addEventListener("change", function() {
globalVolume = volumeControl.value / 100;
players.forEach(function(player) {
player.volume = globalVolume;
});
});
function playSound(e) {
// const note = document.querySelector(`[data-sound-id="${keyName}"]`).play();
const keyName = event.key;
const audio = document.querySelector(`audio[data-sound-id="${keyName}"]`);
const key = document.querySelector(`div[data-sound-id="${keyName}"]`);
if (!audio) return;
key.classList.add("playing");
audio.currentTime = 0;
audio.play();
}
console.log(players);
console.log(x);
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jklMACHINE</title>
<meta name="description" content="remember when we all skinned our music players?">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body id="body">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="keys">
<div data-sound-id="a" class="key">
<kbd>a</kbd>
<span class="sound">clap</span>
</div>
<div data-sound-id="s" class="key">
<kbd>s</kbd>
<span class="sound">hihat</span>
</div>
<div data-sound-id="d" class="key">
<kbd>d</kbd>
<span class="sound">kick</span>
</div>
</div><!-- keys -->
<div class="keyz-loop">
<div data-sound-id="7" class="key">
<kbd>7</kbd>
<span class="sound">backloop</span>
</div>
<div data-sound-id="8" class="key">
<kbd>8</kbd>
<span class="sound">backloop</span>
</div>
</div><!-- keyz loop -->
<div class="container">
<input id="accent-control" type="range" min="0" max="100" step="1">SetVolume</input>
<input id="backloop-control" type="range" min="0" max="100" step="1">backloop aavolume control</input>
<h5>
press <code>[a,s,d] to play one of 3 DRUM sounds</code><br /><br />
press <code>[7 or 8] to play a BACKING LOOP</code><br /><br /><br />
<a href="https://freesound.org/people/TurtleWolfe/bookmarks/category/90037/" rel="link">freeSOUND.org</a><br />
check out my bookmarks & then go link your own collections<br />
by editing the url source of the audio tags.<br /><br />
<code>
<audio data-sound-id="1"><br/>
<source type="audio/wav" src="https://github...wav?raw=true" /><br/>
</audio><br/>
</code><br />
<a href="https://www.twitch.tv/videos/315409005" rel="link">window.addEventListener("keypress",
playSound);</a><br />
global volume slider<br />
drop down selector for looping backbeat<br /><br />
project inspired after first 33 videos which cover the fundamentals<br />
<a href="https://www.udemy.com/share/10015YBEcTdV1aQQ==/" rel="link">Modern JavaScript From the Beginning</a><br />&
the first of 30 tutorials<br />
<a href="https://javascript30.com/" rel="link">https://javascript30.com/</a><br />
</h5>
<footer>
<a href="https://github.com/TurtleWolf/jkl" rel="link" class="yallow">source code on
github.io</a><br />
<a href="https://turtlewolfe.com/" rel="link" class="yallow">Copyright 2018, TurtleWolfe.com</a>
</footer>
</div><!-- backloops on the right column -->
<div>
<!-- audio tags -->
<audio data-sound-id="a" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/clap.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="s" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/hihat.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="d" class="accent">
<source type="audio/wav" src="javaScript30daysDRUM/kick.wav" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="7" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/435147__kickhat__ambient-drone-21-07-2018.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="8" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/440957__l-q__coin-3.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
<audio data-sound-id="9" class="loop" loop>
<source type="audio/wav" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/freeSound/441375__malinby__organ.wav?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</div><!-- audio tags -->
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-125846162-4');
</script>
</body>
</html>
```
2 个答案:
答案 0 :(得分：1)
快速帮助：
这将返回一个html collection：
document.getElementsByClassName("accent")
这将选择带有重音符号的第一个元素：
document.getElementsByClassName("accent")[0]
这将返回node list
document.querySelectorAll("audio")
这捕获了第一个音频元素：
document.querySelectorAll("audio")[0]
这也捕获了first音频元素：
document.querySelector("audio")
现在，要在所有元素上声明某些内容，您需要循环槽。
document.querySelectorAll("audio").forEach(function(){
console.log(e)
})
这是Node列表的一大优点，它具有更好的内置功能：
NodeList.item（）按索引返回列表中的一项；如果为null，则返回null 索引越界。
访问nodeList [i]的替代方法（它返回 当我越界时不确定）。这主要用于 非JavaScript语言DOM实现。
NodeList.entries（）返回一个迭代器，允许代码通过 集合中包含的所有键/值对。 （在这种情况下， 键是从0开始的数字，值是节点。）
NodeList.forEach（）每个NodeList执行一次提供的功能 元素，将元素作为参数传递给函数。
NodeList.keys（）返回一个迭代器，允许代码遍历所有对象 集合中包含的键/值对的键。 （在此 情况下，键是从0开始的数字。）
NodeList.values（）返回允许代码遍历所有对象的迭代器 集合中包含的键/值对的值（节点）。
更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Document https://developer.mozilla.org/en-US/docs/Web/API/Element
答案 1 :(得分：0)
在另一个论坛上得到了答复，回来了解补丁。 现在我明白了。只是感觉有所不同，因为我在屏幕上看不到div，只是“听”到他们的头而已。.
您通常会像使用键一样将其转换为数组（我是 不知道是否有可能将其转换为节点列表。但为什么 不只是继续使用querySelectorAll（）来代替？
var x = document.querySelectorAll('.accent')要注意的另一件事是HTML集合始终处于活动状态，即 当DOM更改时，它会自动更新；这也意味着 比节点列表更昂贵。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？