什么是 DOM 就绪事件？答案

【问题标题】：What is the DOM ready event?什么是 DOM 就绪事件？
【发布时间】：2012-09-28 09:55:21
【问题描述】：

我需要在收到页面内容（整个 HTML 元素）后立即触发脚本，但还不必渲染它。

我认为只要有一个简单的<script> 标签在我的页面顶部执行一些代码就可以解决问题吗？

换个说法：DOM 就绪是否意味着所有元素和资源都已被拉出并渲染？

【问题讨论】：

标签： javascript domready

【解决方案1】：

DOM 就绪意味着所有 HTML 都已被浏览器接收并解析到现在可以操作的 DOM 树中。

它发生在页面完全呈现之前（因为外部资源可能尚未完全下载 - 包括图像、CSS、JavaScript 和任何其他链接资源）。

实际事件称为window.DOMContentLoaded。

【讨论】：

@Oded 谢谢，所以如果我想在 HTML 被解析为 DOM 树之前对其进行操作，页面顶部的纯脚本标记将起作用，对吗？
@silkAdmin - 在 HTML 被解析到 DOM 树之前，您不能处理它。 JavaScript 与 DOM 树一起工作，因此在它被完全解析之前尝试使用它会很棘手——可能是不可能的（你很可能会遇到错误）。你到底想完成什么？
@Oded，我只想将响应正文作为字符串发送到服务器。关于什么是最好的方法的任何想法？
@silkAdmin - 最适合什么？你想优化什么？
@Oded，我希望它尽可能快且重量轻，我认为等待 DOM 准备好不使用 DOM 是不必要的，因为我不需要解析页面。

【解决方案2】：

DOMready 表示：DOM 结构已经构建在浏览器内存中。页面已异步开始渲染，但可能尚未完成，因为图像、视频等外部资源将在稍后完成加载。

【讨论】：

【解决方案3】：

你也可以试试函数

window.onload = function(){
   //your code
  }

或

body.onload = function(){
   //your code
  }

如果你不想使用 jQuery。

但请注意，加载的 DOM 并不意味着加载的页面、iframe、javascript、图像和 css 可能会在该事件之后加载。

关于DOM事件有一个很好的教程Javascript tutorial

【讨论】：

“load”（或 DOMContentLoaded 或您感兴趣的任何实际事件）的事件侦听器实际上会更好地使用这种方法，因此您不必担心是否已经为事件分配了一些东西。 window.addEventListener('load',function () { /*...*/ });

【解决方案4】：

我需要在收到页面内容（整个 HTML 元素）后立即触发脚本，但还不必渲染它。

我认为只需要一个简单的标签在我的页面顶部执行一些代码就可以解决问题吗？

那么您可能想要the DOMContentLoaded event。你可以这样使用它：

    <head>
    <!-- … --->
        <script>
window.addEventListener('DOMContentLoaded',function () {
    //your code here
});
        </script>
    </head>

换个方式来表述问题：DOM 就绪是否意味着所有元素和资源都已被拉取和渲染？

没有“DOM 就绪”事件。您可能会想到jQuery's .ready()，或者这个术语的一些类似的奇怪用法（例如，Google 也有一个类似名称的专有事件，他们指的是）。

但是对于DOMContentLoaded 事件（引用MDN）：

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

【讨论】：

【解决方案5】：

文档对象模型 (DOM) 是一种跨平台且独立于语言的约定，用于表示 HTML、XHTML 和 XML 文档中的对象并与之交互。[1]每个文档的节点都组织在一个树结构中，称为 DOM 树

【讨论】：

您的链接丢失。