Question

一位朋友和我在我们构建的js插件（https://github.com/geibi/pictureserve）中遇到了一个问题 - 关于加载DOM，它的img元素和getElementsByClassName函数。一个简化的例子：

在我们用.pserve：

类调用document.getElementsByClassName

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
    <head>
            <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements);
        </script>

在HTML正文中，我们在本示例中有四个img元素：

<img class="pserve" /> 
<img class="pserve" />
<img class="pserve" />
<img class="pserve" />

控制台返回以下内容：

[item: function]
  0: img.pserve 
  1: img.pserve
  2: img.pserve
  3: img.pserve

但是如果你试图获得元素数组的长度，你得到零结果：

<head>
        <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements.length);
        </script>



==> returning value for the console.log is 0  ==> wrong

如果您将控制台电话放在</body>之前，那么您将获得正确的返回值4.

        <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements.length);
        </script>
 </body>



==> returning value for the console.log is 4  ==> right

所以问题是：

是否可以，如果可以，如何访问via getElementsByClassName中的“元素”，或者是否需要另一个js函数，甚至更合适。
带有[item：function]的四个条目的返回输出看起来很奇怪。是否有其他方式可以访问这些元素？例如通过功能调用或回电？

干杯r。

Answer 1

在解析HTML时，浏览器会对浏览器进行评估。在<head>中，尚未看到文档的正文。

将脚本放在最后，或者将代码放在“加载”或“就绪”事件处理程序中。

Answer 2

在你的情况下script在DOM加载各个元素之前正在执行。

将脚本放在所有内容之后，例如

    <head>....</head>
    <body>

       // Content here...


     <script>
          elements = document.getElementsByClassName("pserve");
          console.log(elements.length);
     </script>

     </body>

Answer 3

使用window.load事件。当你第一次调用脚本时，浏览器对这些元素一无所知。

如何使用getElementsByClassName访问元素

3 个答案: