真的有必要等待 DOM 准备好操作 DOM 吗？答案

【问题标题】：Is it really necessary to wait for DOM ready to manipulate the DOM?真的有必要等待 DOM 准备好操作 DOM 吗？
【发布时间】：2011-08-10 00:54:18
【问题描述】：

如果您的代码只操作已完全解析的 DOM 元素，是否真的需要等待“就绪”（或“window.onload”）事件？

"ready()" function 的 jQuery 文档演示了如何等待执行操作，直到 DOM 完全准备好，但该示例适用于在相关 DOM 元素之前列出的代码（脚本标签）。但似乎出现在 HTML 文档中必要 DOM 元素之后的代码可以访问它们，因为大概是在浏览器解析文档时构建 DOM。

例如，是否可以安全地假设以下代码在所有情况下都是可靠的，还是仍然有必要（或在某种程度上有益）使用准备/加载处理程序？

<body>
  <div id="foo"/>
  <script type="text/javascript">
    var foo = document.getElementById('foo');
    foo.innerHTML = 'The element #foo is loaded!';
  </script>
</body>

This SO question 非常相似，但我想看看它是否有更多信息。

【问题讨论】：

标签： javascript jquery events dom

【解决方案1】：

如果您的 JavaScript 代码位于 DOM 元素之下并且仅以独占方式修改它们，则您无需等待 DOM 就绪事件。

但是，请记住编辑包含 script 元素（或更具体地说，在元素的结束标记之前）的 DOM 元素，该元素用于 IE6 中的 cause big problems（感谢 T.J. Crowder）和 IE7。

但是，这需要内联 scripts，这可能是一个维护问题。最好将您的 JavaScript 存储在外部（许多人谈到在关闭 body 标记之前包含它们的好处），以获得许多好处，例如易于维护和细粒度的缓存控制。

【讨论】：

第一段和第二段+1。 @maerics，请参阅来自 Google Closure 库团队的this thread，了解何时可以操作元素（相当好的权威，Closure 库每天被数百万人使用）。 @alex：你的第三段没有多大意义。您谈到了在下载时阻止执行的内联 script 元素，然后谈到在外部存储您的 JavaScript。
@T.J.感谢投票。我应该如何改进我的答案？是错误的还是措辞模棱两可？
@alex：关于第三段，我认为这是大部分的措辞。您的更新有助于删除有关“下载”的部分。
引用的 IE 错误非常很有趣。请注意，链接的文章及其资源暗示（在某些情况下实际上说）只有当脚本代码直接位于script（不是外部文件）中时才会发生这种情况。这是不正确的。脚本代码来自哪里（元素本身的主体或外部文件）并不重要，关键是修改直接父元素以外的未关闭元素的内容。例如，这将使用 IE6 触发它，即使 script 元素引用外部文件：jsbin.com/elaga5/5
@T.J.你从来没有遇到过这个错误？认为自己很幸运:)。我在某些开源应用程序中发现了它。

【解决方案2】：

是的，如果你的 js 代码在 dom 之后是安全的，但通常混合 html 和 js 并不是一个好主意。

【讨论】：

【解决方案3】：

在您的情况下，这很好，因为浏览器将逐行呈现您的代码，并且在您的代码中 id="foo" 首先出现，因此它将获得该 div ....但假设您在 head 标记中编写了此脚本该脚本将首先运行，它不会获得 id="foo" 的 div，因为它尚未加载..最好在 document.ready 方法中编写

【讨论】：

【解决方案4】：

文档以线性方式加载，因此您的代码可以正常工作。有时，当 javascript 不依赖于它下面的 DOM 时，程序员不会出于性能目的使用 document ready。这是一些example。

【讨论】：