JavaScript 返回數組長度為 0，但控制台中的長度正確

Question

我有一個 HTML 頁面，下面有這個塊。 我無法改變它。 在 JavaScript 中，我想找到 class language-link a所有這些元素並獲取它們的hreflang屬性，所以我這樣做了

var lang_links = document.getElementsByClassName('language-link');
for (var i = 0; i < lang_links.length; i++) {
    console.log(lang_links[i].getAttribute('hreflang'));
}

但由於某種原因，這不會打印任何內容。 我發現lang_links.length等於 0。如果我像這樣在 for 循環之前添加兩個console.log ，

 var lang_links = document.getElementsByClassName('language-link'); console.log(lang_links); console.log("length: " + lang_links.length); for (var i = 0; i < lang_links.length; i++) { console.log(lang_links[i].getAttribute('hreflang')); }

 <nav class="links nav links-inline"> <span hreflang="en" class="en nav-link is-active"> <a href="/drupal/en" class="language-link is-active" hreflang="en">English</a> </span> <span hreflang="fr" class="fr nav-link"> <a href="/drupal/fr" class="language-link" hreflang="fr">French</a> </span> <span hreflang="ar" class="ar nav-link"> <a href="/drupal/ar" class="language-link" hreflang="ar">Arabic</a> </span> </nav>

我的瀏覽器控制台打印

HTMLCollection []
> 0: a.language-link.is-active
> 1: a.language-link
> 2: a.language-link
  length: 3
> __proto__: HTMLCollection

length: 0

數組如何正確打印，甚至告訴我正確的長度，但是當我打印數組的長度時它顯示為 0？

此外，如果我在瀏覽器的控制台中運行我的代碼，我會得到預期的 output ，它顯示了所有hreflang屬性：

HTMLCollection(3) [a.language-link.is-active, a.language-link, a.language-link]
> 0: a.language-link.is-active
> 1: a.language-link
> 2: a.language-link
  length: 3
> __proto__: HTMLCollection

length: 3

en
fr
ar

是否可能是由於在創建元素之前運行了 JavaScript 代碼？ 但如果是這樣的話， console.log(lang_links)不應該打印任何東西......

編輯：我使用的是 Drupal 8，所以我無法更改 HTML 文檔中的腳本 position（我認為）。 如果我使用檢查器，我看不到我的 JavaScript 文件，但看起來 Drupal 在正文的末尾運行腳本，因為這是檢查器中的所有腳本出現的地方，而我的其他getElementByClassName()運行沒有問題。

Answer 1

大多數情況下，您的 JS 代碼在 DOM 加載之前運行（或者如果是這種情況，則動態構建），因為代碼本身可以很好地處理 static 內容。

檢查您加載腳本的位置。 如果它在頭部或身體的開始，將其移動到底部。 作為雙重好處，它略微提高了頁面性能。

關於第二個問題，為什么會顯示在控制台上，@vcode 已經回答了。 DOM 元素是對象，您會看到它們的“最終結果”。