在 DOM 准备就绪之前附加类

Attach classes before DOM is ready

本文关键字：DOM 准备就绪      更新时间：2023-09-26

我的页面上有一个导航元素，我在 DOMContentLoaded 之前使用 DOM API 创建。它可以展开或折叠。因为我在 DOM 准备就绪之前创建它并附加所有相关类，所以当我最终将其附加到父节点时，这些类已经存在。

我的问题是这是否可以与 body 元素有关（在 DOMContentLoad 事件之前将样式附加到它）。

我想这样做的原因是，当类添加到 body 元素时，我的 CSS3 转换中有一个视觉工件，所以如果可能的话，我希望事先有这个类。

当

且仅当脚本位于 <body> 标记的开头之后时，才能在 DOMContentLoaded 事件之前将类附加到 <body> 元素。 这里重要的是脚本的位置。

所以，这将起作用：

<body>
<script>
document.body.className += " foo";
</script>
other HTML here
</body>
脚本

按顺序执行，当脚本运行时，<script> 标记之前的 DOM 元素将出现在 DOM 中。 DOMContentLoaded事件意味着整个 DOM 已经完成解析。 这并不意味着您无法访问已解析的内容。

在<head>部分中，您还可以通过修改始终可用的类document.documentElement将类添加到 <html> 标记。 如果它只是您要触发的父 CSS 选择器，这通常与将类放在 <body> 标签上一样有效。

仅供参考，避免闪烁或临时显示未完成对象的常见解决方法是将这些对象指定为在 CSS 中不可见，以便在页面开始呈现这些对象时尚不可见。

然后，脚本

运行并修改这些对象上的对象、样式或类，然后脚本做的最后一件事是使对象可见，以便仅在它们处于最终形式时（在脚本修改它们之后）将它们绘制在屏幕上。

相关文章：