Question

我有一个简单的html页面，其中包含 javascript

var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}

html 页面的一部分 -

<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>

我的问题是 myitems.length 总是返回0，应该是4。

Answer 1

您的查询可能失败的几个原因：

在解析部分DOM之前，您过早地运行代码。
DOM元素是动态创建的（通过其他一些代码），因此您必须在代码运行后运行代码。
您的HTML中存在错误，因此您认为页面中的内容不是浏览器最终解析的内容。
您的javascript代码中存在错误，因此在执行您想要的所有操作之前，它会中止执行。

最常见的问题是＃1。修复方法是确保您的代码放在页面HTML中的那些元素之后，使用一个框架告诉您文档何时就绪，或者自己订阅一个事件，这样您就可以知道文档何时就绪。

如果您对单个普通的javascript函数调用感兴趣，可以告诉您何时文档在所有浏览器中都已准备就绪，您可以在此处获取代码：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it尽管您可能需要做的就是移动要查询的DOM元素之后的<script>标记（例如，在</body>标记之前的HTML末尾，如下所示：

<html>
<body>
<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>
<script>
var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}
</script>
</body>
</html>

Answer 2

试试这个，

<a href="#"><img class="img" src="image/100.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/200.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/400.jpg" alt="z"/></a>
<a href="#"><img class="img" src="image/300.jpg" alt="z"/></a>
<script>
var myitems = document.getElementsByClassName("img");
for (var z = 0; z <= myitems.length; z++) { 
   alert("hello" + myitems.length);
}
</script>

Answer 3

在JSFiddle为我工作。所以，这可能取决于您在代码中的Javascript位置。如果您的代码段位于Elements之前，则它将返回0的长度，因为在计算Javascript时，DOM中没有元素。如果您将Javascript放在文档的末尾，它应该可以工作。

编辑：要在Javascript中查找错误，您可以使用Firebug-Console

Javascript返回零数组大小

3 个答案: