0

如何遍历使用 document.getElementsByTagName(); 检索的元素；因为它的长度为 0 但仍有元素。

下面是JS代码：

class HKPlayer
{
    constructor()
    {
        this.getPlayers();
        this.getPlayerAttributes();
    }
    getPlayers()
    {
        this.players = document.getElementsByTagName("HKPlayer");
    }
    getPlayerAttributes()
    {
        console.log(this.players);
    }
}
(function () {
    new HKPlayer();
})();

下面是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HKPlayer Demo</title>
    <script src="dist/HKPlayer.js" type="text/javascript"></script>
</head>
<body>
    <HKPlayer type="video" theme="dark" src="assets/video/1.mp4"></HKPlayer>
    <br/>
    <HKPlayer type="video" theme="dark" src="assets/video/2.mp4"></HKPlayer>
</body>
</html>

输出如下：

在此处输入图像描述

在此处输入图像描述

this.players由于数组 this.players 数组为空，我无法循环遍历。我怎么做。

4

2 回答 2

1

在加载 DOM 之前，您正在执行 JS。

尝试包装这部分代码：

(function () {
    new HKPlayer();
})();

在这里面：

document.onreadystatechange = function()
{
    if(document.readyState === 'complete')
    {
        // Put your code that relies on a complete/ready DOM here.
    }
}

编辑：作为对评论的回应，不，这不是 100% 跨浏览器，也不会总是有效。如果您想要尽可能多的浏览器支持，您很可能希望使用以下方法：

document.addEventListener('DOMContentLoaded', fn, false);

回退到：

window.addEventListener('load', fn, false )

或者对于旧版本的 IE：

document.attachEvent("onreadystatechange", fn);

回退到：

window.attachEvent("onload", fn);

这显然是 jQuery 处理其 $(document).ready() 的方式。可以在此处找到有关此的更多信息。

于 2017-10-04T17:56:29.943 回答
0

数组不是空的，它有长度和两个项目，正如我在您所附的图片上看到的那样，我认为您可以在 getPlayerAttributes 函数中访问 this.player.length 和 this.player[0]。如果你

于 2017-10-04T17:49:33.870 回答