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 元素是对象，您会看到它们的“最终结果”。