使用getElementsByTagName時爲空數組

如何循環使用document.getElementsByTagName（）檢索到的元素;因爲它的長度是0，但仍然有元素。使用getElementsByTagName時爲空數組

下面是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。我怎麼做。

來源

2017-10-04 Shakti Phartiyal

DOM是否在執行時加載？如果沒有，這是一個愚蠢的[爲什麼jQuery或DOM方法，如getElementById沒有找到該元素？]（https://stackoverflow.com/q/14028959/4642212）;否則，可能是Chrome瀏覽器的JavaScript控制檯懶惰地評估數組？（https://stackoverflow.com/q/4057440/4642212）。 – Xufox

你正在執行你的JS加載DOM之前。

嘗試包裝你的這部分代碼：

(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找到。

來源

2017-10-04 17:56:29 user6003859

謝謝，這可以解決問題。我希望這是跨瀏覽器兼容。和「永遠有效」？ –

那麼你很可能想看到我的編輯。 – user6003859

數組不是空的它有長度和兩個項目，因爲我看到你的附加圖片，我想你可以在getPlayerAttributes函數中訪問this.player.length和this.player [0]。如果你

來源

2017-10-04 17:49:33

this.players.length返回0 –

如果你在onload或點擊事件中調用你的代碼，那麼你可以到達你的數組。 @Xufox的解釋是正確的，當你運行你的代碼的時候，html元素無法生成，但你可以在chrome工具中看到，因爲當你看到它已經生成時，我們可以在控制檯中看到評估值 –

使用getElementsByTagName時爲空數組

回答

相關問題