Javascript 什么是 DOM 就绪事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12637725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 10:55:09  来源:igfitidea点击:

What is the DOM ready event?

javascriptdomready

提问by silkAdmin

I need to fire a script as soon as the page content (the whole HTML element) has been received, but it doesn't have to be rendered yet.

我需要在收到页面内容(整个 HTML 元素)后立即触发脚本,但还不必呈现它。

I assume that just having a simple <script>tag that executes some code at the very top of my page should do the trick?

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

To formulate the question differently: does DOM ready mean that all elements and resources have been pulled and rendered?

用不同的方式表述这个问题:DOM 就绪是否意味着所有元素和资源都已被拉取和呈现

回答by Oded

DOM ready means that all the HTML has been received and parsed by the browser into the DOM tree which can now be manipulated.

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

It occurs beforethe page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources).

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

The actual event is called DOMContentLoaded.

实际事件称为DOMContentLoaded

回答by devnull69

DOMready means: The DOM structure has been built in browser memory. Asynchronously the page already started rendering, but it might not be finished yet as external resources like images, videos etc. will finish loading later.

DOMready 表示:DOM 结构已经内置在浏览器内存中。异步页面已经开始渲染,但它可能还没有完成,因为图像、视频等外部资源将在稍后完成加载。

回答by Léo Benallal

You might also try with the functions

您也可以尝试使用这些功能

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

or

或者

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

if you don't want to use jQuery.

如果您不想使用 jQuery。

Be careful though, DOM loaded doesn't mean the page loaded, iframes, javascript, images and css might load after that event.

不过要小心,DOM 加载并不意味着页面加载,iframes、javascript、图像和 css 可能会在该事件之后加载。

There is a good tuto on DOM events Javascript tutorial

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

回答by Jan Kyu Peblik

I need to fire a script as soon as the page content (the whole HTML element) has been received, but it doesn't have to be rendered yet.

I assume that just having a simple tag that executes some code at the very top of my page should do the trick?

我需要在收到页面内容(整个 HTML 元素)后立即触发脚本,但还不必呈现它。

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

It's likely then that you want the DOMContentLoadedevent. You can use it thusly:

这是可能的,然后你想要DOMContentLoaded事件。您可以这样使用它:

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

To formulate the question differently: does DOM ready mean that all elements and resources have been pulled and rendered?

换一种方式表述这个问题:DOM 就绪是否意味着所有元素和资源都已被拉取和呈现?

There is no "DOM ready" event. You're probably thinking of jQuery's .ready(), or some similar odd use of this terminology (e.g. Google also has a similarly named proprietary event they refer to).

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

For the DOMContentLoadedevent, however (to quote MDN):

DOMContentLoaded但是,对于该事件(引用MDN):

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

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

回答by satender

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.[1] The nodes of every document are organized in a tree structure, called the DOM tree

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