在DOM准備好之前附加類

Question

我在頁面上有一個導航元素，該元素是在DOMContentLoaded之前使用DOM API創建的。 它可以擴展或折疊。 因為我在DOM准備就緒之前創建了它並附加了所有相關的類，所以當我最終將其附加到父節點時，這些類已經存在了。

我的問題是這是否可以與body元素一起使用（在DOMContentLoad事件之前將樣式附加到它）。

我想這樣做的原因是，當將類添加到body元素時，我的CSS3過渡中出現了視覺瑕疵，因此，如果可能的話，我想事先將類放在那里。

Answer 1

當且僅當您的腳本位於<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中不可見，以便在頁面開始呈現這些對象時不可見。

然后，腳本運行並修改這些對象上的對象，樣式或類，然后腳本要做的最后一件事就是使對象可見，以便僅當它們處於最終形式時（在腳本具有修改了它們）。