Javascript 分区内的getElementsByClassName错误

我有一个包含html5视频播放器的多个div的页面。基本上是这样的

<div class="panel">
  <video class="player"><source src="video1.mp4" type="video/mp4" /></video>
</div>
<div class="panel">
  <video class="player"><source src="video2.mp4" type="video/mp4" /></video>
</div>
...

...

现在我想用类“panel”遍历所有元素并暂停所有视频播放器。所以我在JavaScript中尝试这个：

var panels = document.getElementsByClassName("panel");
for (i = 0; i < panels.length; i++) {
  var video = panels[i].getElementsByClassName("player");
  video.pause();
}

var panels=document.getElementsByClassName（“panel”）；
对于（i=0；i

我得到的是以下错误消息：

未捕获类型错误：面板[i]。getElementByClassName不是函数

有人能帮我解决这个问题吗

提前多谢
 你的问题说错了。它是指：

document.getElemtsByClassName(...)

应该是：

document.getElementsByClassName(...)

假设这只是您问题中的一个输入错误（因为您没有报告可能导致的错误），那么：


这行代码获取一个HTMLCollection，而不是单个DOM元素：

var video = panels[i].getElementsByClassName("player");

所以，你不能这样做：

 video.pause();

因为上面代码行中的
video
是一个HTMLCollection，而不是DOM元素，并且HTMLCollection没有
.pause（）
方法。要从HTMLCollection中获取DOM元素，必须使用属性索引来获取单个DOM元素：

 video[0].pause();

或者，您可以迭代整个HTMLCollection，对HTML集合中的所有DOM元素进行操作。这将获得每个div中的第一个player对象（请参见
[0]
）：

您也可能只想使用
document.querySelectorAll（）
，并在一次查询和一次迭代中完成这一切：

var videos = document.querySelectorAll(".panel .player");
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}


而且，尽管您没有询问使用jQuery，但它通常对DOM查询、迭代和操作非常有用：

$(".panel .player").each(function() {
    this.pause();
});

看起来很奇怪，你不直接引用播放器，因为它会更快。你的代码中有拼写错误，你能发布实际的代码吗？没有
getElementByClassName
，只有
getElementsByClassName
可能重复的拼写错误-我修复了它们！谢谢！成功了！我还想在面板上设置属性-所以你的第二个建议对我来说不起作用，但我想对其他用户来说是一个很好的提示！
var videos = document.querySelectorAll(".panel .player");
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

var videos = document.querySelectorAll(".player");
for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
}

$(".panel .player").each(function() {
    this.pause();
});