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

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

尝试包装这部分代码：

UITableView

在此内部：

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

编辑：作为对评论的回复，不是这不是100％跨浏览器，也不是总是工作。如果您希望获得尽可能多的浏览器支持，您很可能希望使用以下方法：

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

后退：

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

或旧版本的IE：

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

后退：

document.attachEvent("onreadystatechange", fn);

这显然是jQuery处理其$（document）.ready（）的方式。有关此内容的更多信息，请访问here。

Answer 2

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

使用getElementsByTagName时清空数组

2 个答案: