div 中的 getElementsByClassName 错误
getElementsByClassName error within a div
我有一个包含多个 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
有没有人可以帮我解决这个问题?
提前致谢!!
您的问题有拼写错误。它指的是:
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 的页面,其中包含 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
有没有人可以帮我解决这个问题?
提前致谢!!
您的问题有拼写错误。它指的是:
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();
});