div 中的 getElementsByClassName 错误

Question

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

<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>
...

现在我想使用 class "panel" 遍历所有元素并暂停所有视频播放器。所以我在 JavaScript:

中尝试这个

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

我得到的是这条错误信息：

Uncaught TypeError: panels[i].getElementByClassName is not a function

有没有人可以帮我解决这个问题？

提前致谢！！

Answer 1

您的问题有拼写错误。它指的是：

document.getElemtsByClassName(...)

应该是：

document.getElementsByClassName(...)

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

这行代码获取一个 HTML 集合，而不是一个 individual DOM 元素：

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

所以，你不能这样做：

 video.pause();

因为上面那行代码中的 video 是一个 HTML 集合，而不是 DOM 元素，而且 HTML 集合没有 .pause() 方法。要从 HTML 集合中获取 DOM 元素，您必须使用属性索引进入它以获取 individual DOM 元素：

 video[0].pause();

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

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

或者，如果您希望所有玩家对象都使用此技术，则需要使用两个 for 循环：

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

您也可能只想使用 document.querySelectorAll() 并在一次查询和一次迭代中完成所有操作：

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

此外，考虑到您的 HTML，还不完全清楚您为什么首先查询 .panel 元素。如果您没有其他要避免的 .player 对象，您可以直接在更简单的查询中获取播放器对象：

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

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

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

div 中的 getElementsByClassName 错误

getElementsByClassName error within a div

javascript

html

selector

getelementsbyclassname