为什么不是 (function(){}());工作，但 window.onload 是？答案

【问题标题】：Why isn't (function(){}()); working, yet window.onload is?为什么不是 (function(){}());工作，但 window.onload 是？
【发布时间】：2014-04-03 10:45:48
【问题描述】：

前几天我在试验 javascript，想看看某个函数是否可以工作。所以我做了我的 HTML：

<body>
    <p id="paragraph"></p>
</body>

（当然，在实际文档中我已经设置了我的doctype并创建了html标签等等）

然后写了我的javascript（正确链接到头部）：

(function(){
    document.getElementById("paragraph").innerText = "Hi there!";
}());

现在，我打开了我的 html，有点困惑为什么我的<p> 不包含任何文本，所以我想IIFE 可能没有在页面加载时运行，所以我尝试了其他方法：

(function(){
    console.log("Hi there!");
}());

再次打开，发现当时 javascript 运行良好；控制台像往常一样打印了“Hi There”。我现在有点困惑，所以我尝试了：

window.onload = function(){
    document.getElementById("paragraph").innerText = "Hi there!";
}

一切都很完美！该段落包含“您好”，就像它第一次应该（嗯，我想是这样）一样！

谁能解释这种荒谬的行为？为什么(function(){/*stuff*/}()); 不为.innerText 工作？

【问题讨论】：

不应该是(function(){ console.log("Hi there!"); })();而不是(function(){ console.log("Hi there!"); }());吗？我刚刚修改了最后一个括号。
因为“正确链接到头部”。在head 中，DOM 尚未准备好，因此getElementById 将失败，因为它还找不到该元素..
另外，真的没必要用括号括起来。

标签： javascript html iife

【解决方案1】：

浏览器在大多数情况下的工作方式是，它们首先处理 html 文件（包括按顺序执行其中的任何脚本），然后创建 DOM 元素，例如您的段落。

所以当你的 IIFE 被执行时，这个段落还不存在（当然这也一定是在你的控制台上打印了一些东西）。

console.log 是另一回事 - 控制台对象甚至在加载 html 之前就存在，这就是为什么它可以正常工作的原因。

另外，您需要在 getElementById 中使用小写 d

【讨论】：

【解决方案2】：

加载事件在文档加载过程结束时触发。在此时，文档中的所有对象都在 DOM 中，并且所有图像和子帧已完成加载。

MDN - window onload

如果你这样做，它会起作用：

// wait for the dom to be ready...
window.onload = function(){
    // update the element...
    (function(){
        document.getElementById("paragraph").innerText = "Hi there!";
    }());    
}

【讨论】：