为什么getElementsByClassName可以在没有"window.onload"的情况下运行

如下所示，它将在没有'window.onload'的情况下运行，var x是'[<div class="myInput"></div>]'，但不是'[]'。

<html>
<head>
    <script type="text/javascript">
        var x=document.getElementsByClassName("myInput");
    </script>
</head>
<body>
    <div class="myInput"></div>
</body>
</html>

它是如何以及何时将元素放入数组的？

x是已找到元素的活动HTMLCollection，这意味着当底层文档发生更改时（在这种情况下，在加载时），它会自动更新。

因此，x最初的值与加载文档时的值不同：

<html>
<head>
    <script type="text/javascript">
        var x=document.getElementsByClassName("myInput");
        document.write('Initial: ', x, '<br>');
        document.write('Initial Length: ', x.length, '<br>');
    </script>
</head>
<body>
    <div class="myInput"></div>
  
    <script type="text/javascript">
        document.write('Final: ', x, '<br>');
        document.write('Final Length: ', x.length, '<br>');
    </script>
</body>
</html>

HTML文档由浏览器自上而下读取。在头脑中，如果您尝试执行x = document.getElementsByClassName("classname")，则不存在任何元素，因为浏览器在脚本标记的第1行之后仍然没有读取任何内容。

稍后，浏览器将读取<body>标记，创建元素，如果此时使用onload调用它，则会得到列表。

相关内容

最新更新

热门标签：