Question

首先，我想说我对JavaScript很陌生，但对编程并不是全新的。我熟悉python，刚刚在我的大学上学完c ++并获得了A.现在这个学期我正在学习JavaScript。我觉得这个问题有点傻，因为这对我来说似乎很愚蠢，但请对我好一点......无论如何，我的任务的第一部分是编写一个函数来计算教师提供的网页上的超链接。。应该有20个。所以，老师提供了2行代码来创建一个链接数组，然后是console.log它们。我完全复制并粘贴了它们，就像老师在分配页面上一样。这两行是：

var myLinks = document.getElementsByTagName("a");
console.log("Links", myLinks.length);

首先，我将这两行直接打印到Chrome控制台上，提供的网站打开，输出为20.正确！所以我很高兴地将两行复制并粘贴到链接的JavaScript文件中并重新加载页面，它产生0.我不明白为什么......我希望这不是一个愚蠢的问题，但是来自c ++上学期，这真的对我来说似乎是一个愚蠢的问题......谢谢你的帮助！

更新：这是整个JavaScript文件。而且我只有3个星期进入学期，仍然觉得这一切都在我脑海中......无论如何，是的，脚本标签需要在身体标签的末尾，我想。我没有意识到这很重要......我为这个愚蠢的问题道歉......但是，谢谢大家，我感谢你的帮助。

Answer 1

<script>
function getAnchorLinkCount() {
    var myLinks = document.getElementsByTagName("a");
    console.log("Links", myLinks.length);
}
</script>

然后

<body onload="getAnchorLinkCount()">

你想在你的DOM完全加载时得到计数

Answer 2

最有可能的是，在html完全加载之前执行的功能。要避免此类问题，请始终将JS包装在ready处理程序中。使用JQuery，使用：

 $(document).ready(function(){
     // your code here
 });

对于纯JS等价物，请查看this thread。

Answer 3

问题是，在DOM加载完成之前，javascript正在执行（很可能看不到所有代码）。

考虑一下：

<script>
    var myLinks = document.getElementsByTagName("a");
    alert("Links" + myLinks.length);
</script>

<body>
    <a href = "foo"> foo</a>
    <a href = "bar"> bar</a>
</body>

输出：Links0

VS

<body>
    <a href = "foo"> foo</a>
    <a href = "bar"> bar</a>
</body>

<script>
    var myLinks = document.getElementsByTagName("a");
    alert("Links" + myLinks.length);
</script>

输出：Links2

为了避免这个问题，有一些建议：

在 <body>标记之后放置javascript代码，而不是在头部。

使用jQuery的$(document).ready(...)
之类的东西
将javascript放在头部，但在body标记<body onload = "myInitFunction()">
中调用onload方法

Answer 4

如果您正在处理DOM这是HTML的编程接口。您必须等待DOM结构加载，以便可以在JavaScript
中访问它

使用DOMContentLoaded，在完整加载和解析初始HTML文档时会触发DOMContentLoaded事件。

另一个解决方案可能是在关闭body标记之前包含您的脚本，该标记将在加载和解析所有DOM时执行。

试试这个：

document.addEventListener("DOMContentLoaded", function(event) {
  var myLinks = document.getElementsByTagName("a");
  console.log("Links", myLinks.length);
});

注意：根据文档，一个非常不同的事件 - 加载 - 应该仅用于检测完全加载的页面。使用负载是一个非常受欢迎的错误，其中DOMContentLoaded会更合适，所以要小心。

Answer 5

您编写的代码没有问题，但问题可能出在执行时。

首先你需要等到DOM准备就绪然后你可以调用js方法。这就是为什么它是document....从DOM树中得到我的元素的意思。

一旦DOM准备就绪，可以有多种方法执行

window.load
DOMContentLoaded
在关闭body标签之前放置脚本。这可以确保您的整个DOM都准备就绪。
如果您使用的是jquery，可以使用$(document).ready(function(){})

以下是所有js代码位于页面底部的代码段。

<body>
<a href="#"> Link 1</a>
   <a href="#"> Link 2</a>
   <a href="#"> Link 3</a>
   <a href="#"> Link 4</a>
   <a href="#"> Link 5</a>
   <a href="#"> Link 6</a>
<script>
     // Will give a Collection of a tags
   var getListTagName = document.getElementsByTagName('a');
    console.log('document.getElementsByTagName ',getListTagName.length);

   // Does same but but document.querySelectorAll is preferred to match a css selector
   var getListQuery = document.querySelectorAll('a');
   console.log('document.querySelectorAll ',getList.length)
</script>
</body>

希望这篇文章对你有所帮助。

JavaScript console.log输出错误的数组长度

5 个答案: