放置 Javascript 片段以在页面呈现之前更改页面的 DOM 的最佳位置在哪里答案

【问题标题】：Where is the best place to place a Javascript snippet to alter the DOM of a page before it renders放置 Javascript 片段以在页面呈现之前更改页面的 DOM 的最佳位置在哪里
【发布时间】：2011-02-13 06:43:57
【问题描述】：

我有几个动态页面，我想在页面完全呈现之前更改某些元素。

我的 sn-p 是这样的：

document.body.getElementById("change").innerHTML = "<img src...";

我无权更改内容服务器端。

放置 sn-p 以在其呈现的页面之前运行代码的最佳位置在哪里？

相反，将 Javascript 放在 HEAD（在 window.onload 事件内？）还是在关闭 BODY 之前（不在事件侦听器内）最佳？

【问题讨论】：

标签： javascript dom dom-events rendering pageload

【解决方案1】：

如果您不想在更改 DOM 之前渲染任何元素，您可以在 body 元素上设置 CSS display: none，然后在完成后将其更改为 display: block。

【讨论】：

【解决方案2】：

不确定我是否正确理解了您的问题，但如果您在头部使用事件侦听器（例如 jQuery 的$(document).ready()），您将能够通过传递您的 sn- 在加载 dom 结构后更改元素p 到事件触发时调用的函数 (handler)。

<HEAD>
    //...
    <SCRIPT type="text/javascript">

        $(document).ready(function() {
            $("#change").append(
                $("<img src=\"...\">") 
            ) ;
        }) ;

    <SCRIPT>

</HEAD>

使用核心 javascript，您必须为 mozilla (W3C) 和 Internet Explorer 事件规范创建事件侦听器。互联网上有大量关于如何做到这一点的文档。

在这种情况下，最好的办法显然是自己创建内容，而不是在渲染后更改它。

【讨论】：

【解决方案3】：

恐怕您不太可能在页面呈现之前执行您的脚本。当然，您可以放置一个内联脚本并让它在您希望它显示您的内容的地方使用 document.write(...)，但这是一个可怕的解决方案。或者你能做的最好的事情就是在“DOM Ready”事件中，虽然很难在所有浏览器上保持一致，但你确实需要一个库来抽象细节。 jQuery 提供了它的 ready 方法来在 DOM 准备就绪时触发事件，而不是在页面和所有资源完成加载时触发。

【讨论】：

【解决方案4】：

由于浏览器通常会在元素被解析后立即呈现元素，因此最好的方法是将代码直接放在引用元素之后的 script 元素中：

<div id="change"></div>
<script type="text/javascript">
    document.body.getElementById("change").innerHTML = "<img src...";
</script>

【讨论】：

【解决方案5】：

AFAIK 你不能这样做。因为在渲染页面之前不会有任何元素，并且您无法访问尚未加载到 DOM 树的元素。

【讨论】：