domready、onload、body、head分别是什么意思?

What are means of domready, onload, body, head?

我对domready、onload、body、head存疑。当我将一些 js 链接到 head 时,它不起作用。否则,它在体内起作用。

我在 JSFIDDLE 中注意到,它提到了。

这个的意思和区别是什么?

能解释一下吗?

访问 DOM 的

Javascript 必须在加载 DOM 之前执行。

文档 <head> 部分中 运行 的代码将在 DOM 加载之前执行,因此如果它尝试对 DOM 进行操作, DOM 将只是空的。

文档 <body> 部分中 运行 的代码将在该脚本标记之前的任何 DOM 元素之后执行,但在任何 DOM 元素之前执行在脚本标签之后。

如果您将 <script> 标记放在 <body> 部分的末尾 </body> 标记之前,那么整个 DOM 将在该脚本时准备就绪执行。

DOMContentLoaded(jsFiddle 调用 onDomReady)是一个事件,当 DOM 现在已加载并且可供脚本访问时触发。如果在 DOMContentLoaded 事件触发时您 运行 您的代码,那么 DOM 将准备好供您的代码访问。

window.onload 是一个事件,当 DOM 现在已加载并且页面的 HTML 中指定的任何资源也已完成加载(如图像)时触发。这总是在 DOMContentLoaded 事件之后触发。

您可以在此处查看此问题的进一步描述:pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it


如果代码在 <body> 中有效,但在 <head> 中无效,那么您可能 运行 之前在 <head> 标记中过早地使用了代码DOM 已准备就绪。您可以将它留在 <body> 的末尾附近,也可以将它连接到加载事件之一,然后如果需要,可以将它放在 <head> 标记中。

<head> 包含有关页面属性 CSS 和 JavaScript 的所有信息。尽管 CSS 和 JavaScript 也可以包含在正文中。 Head会包含Page的meta信息,Title,baseURL等

<body> 包含正文的实际内容。哪些访问该网站的用户实际看到或与之互动。

DOM 是文档对象模型。这是基本结构,也可以说是页面所在页面的骨架。

domready 是 DOM 完成加载后立即触发的事件。例如:假设一个页面只有一个图像。它将等待图像标签被解析。一旦收到图片标签,它就会被触发。它不会等待从源加载整个图像。

onload 是加载完成(DOM + 内容)页面时触发的事件。在前面 donready 中的示例中,onload 将等待从源中获取图像,然后将被触发。