JavaScript的onload事件和DOM

Question

JavaScript的onload事件和DOM

3

我有这个示例文档：

<html>
    <body>
        <script type="text/javascript">
            document.body.onload = myFunc();

            function myFunc() {
                element = document.getElementById('myDiv');
                element.innerHTML = 'Hello!';
            }
        </script>
        <div id="myDiv"></div>
    </body>
</html>

如果myFunc是document.body.onload的回调函数，为什么'element'为空？

相反，如果脚本在div后插入，则可以正常工作：

<html>
    <body>
        <div id="myDiv"></div>
        <script type="text/javascript">
            document.body.onload = myFunc();

            function myFunc() {
                element = document.getElementById('myDiv');
                element.innerHTML = 'Hello!';
            }
        </script>
    </body>
</html>

我的问题是：如果我在处理程序函数中使用 onload 事件，我是否应该拥有整个DOM？为什么不应该？

- Andrey_

尽管ThiefMaster指出了您代码中的错误，但这可能对您有所帮助 - 在DOMContentLoaded之前访问document.body可能会导致错误。因此，请注意这一点 :) 即使是jquery也会检查document对象的存在以确认dom已准备好供脚本访问。如果您将来要做很棒的事情，var body = document || document.body || document.getElementsByTagName('body')[0]可能会有所帮助;) - Tamil

2个回答

0

使用这个代替

document.body.onload = myFunc;

或者

document.body.onload = function() {
    myFunc();
};

- VisioN

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThiefMaster · Accepted Answer

问题在于您立即调用了该函数（并分配其返回值）。

而应将函数赋值给变量，这样它就会正常工作：

document.body.onload = myFunc;

您应该在函数中使用var element，以避免创建全局变量。

或者，如果您想让人们感到困惑：

document.body.onload = myFunc();
function myFunc() {
    return function() {
        var element = document.getElementById('myDiv');
        element.innerHTML = 'Hello!';
    };
}

但是让我们不要这样做。这在这里没有任何意义。;)