1

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

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

（当然，在实际文档中我已经设置了我的文档类型并创建了 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？

4

2 回答 2

4

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

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

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

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

于 2014-04-03T10:56:18.807 回答
1

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

MDN - 窗口加载

如果您执行以下操作，它将起作用：

// wait for the dom to be ready...
window.onload = function(){
    // update the element...
    (function(){
        document.getElementById("paragraph").innerText = "Hi there!";
    }());    
}
于 2014-04-03T10:55:14.147 回答