使用 getElementsByTagName 时为空数组

Question

如何循环使用 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 数组为空。我该怎么做。

Answer 1

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

Answer 2

您在加载 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() 的方式。可在 here.

中找到有关此的更多信息

使用 getElementsByTagName 时为空数组

Empty array when using getElementsByTagName

javascript

htmlcollection