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？

此外，如果我运行我在浏览器控制台中的代码，我会得到显示所有 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 代码运行ning？但如果是这样的话，console.log(lang_links) 不应该打印任何东西...

编辑：我使用的是 Drupal 8，所以我无法更改 HTML 文档中的脚本位置（我认为）。如果我使用检查器，我看不到我的 JavaScript 文件，但它看起来像正文末尾的 Drupal 运行s 脚本，因为这是检查器中的所有脚本和我的其他脚本出现的地方 getElementByClassName() 运行没问题。

Answer 1

大多数情况下，您的 JS 代码在 DOM 加载（或动态构建，如果是这种情况）之前运行，因为代码本身可以很好地处理静态内容。

检查您加载脚本的位置。如果它在头部或 body 的开头，请将其移至底部。作为双重好处，它略微提高了页面性能。

关于第二个问题，为什么会在控制台显示，@vcode已经回答了。 DOM 个元素是 objects，您会看到它们的“最终结果”。

JavaScript 返回数组长度为 0，但控制台中的长度正确

JavaScript returning array length of 0, but correct length in console

javascript

drupal

drupal-8