Question

前几天我正在尝试使用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运行正常;控制台打印了“你好”。和平常一样。我现在有点困惑，所以我尝试了：

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

这一切都完美无缺！该段包含＆＃39;嗨那里＆＃39;就像它应该有（好吧，我想是的）第一次！

任何人都可以解释这种荒谬的行为吗？为什么(function(){/*stuff*/}());

为.innerText工作？{/ 1}

Answer 1

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

因此，当您的IIFE执行时，该段落尚未存在（当然这也必须在您的控制台上打印一些内容）。

console.log是另一回事 - 控制台对象在html加载之前就已存在，这就是为什么工作正常。

另外，你想在getElementById

中使用小写 d

Answer 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!";
    }());    
}

为什么不是（function（）{}（））;工作，但window.onload是？

2 个答案: