在准备状态之前操作dom是否可以？
[英]Is it ok to manipulate dom before ready state?
问题描述
这通常是我如何管理渐进增强同时保持体验清洁，但它有多安全？ 是否存在竞争条件，这不起作用？
想象一下简单的抽象场景，如果你有javascript支持，你想要以不同的方式显示...这通常是我最终会做的事情：
<div id="test">original</div>
<script type="text/javascript">
var t = document.getElementById('test');
t.innerHTML = 'changed';
</script>
许多人可能会声称你应该使用一个框架并等待一个domready事件，并在那里进行更改..但是有一个显着的延迟，其中'test'元素已经在文档结束之前呈现并且css已经准备好了一个domready触发..因此导致明显的'原始'闪烁。
此代码是否容易出现竞争失败？ 或者我可以保证，如果元素存在于脚本之前，它是可发现的并且可以修改吗？
提前致谢。
5 个解决方案
解决方案1
5 已采纳 2009-08-03 15:22:15
你可以，但有一些问题围绕这样做。
首先，在IE中如果你试图操纵一个尚未关闭的节点（例如BODY在它的关闭标签之前应该在你的JS之下）那么你可能会遇到IE的“OPERATION ABORTED”错误，这将导致一个空白页面。 操作节点包括附加节点，移动节点等。
在其他浏览器中，行为是未定义的，但它们的行为通常与您期望的一样。 主要问题是随着页面的发展，页面可能以不同方式加载/解析/运行。 这可能会导致某些脚本在浏览器定义已实际创建的引用元素并使其可用于DOM操作之前运行。
如果您试图提高用户感知性能（即快速）。 我强烈建议你避开这条路，并考虑减轻你的网页。 您可以使用Yahoo的YSlow / Google的Page Performance Firebug来帮助您入门。
解决方案2
3 2009-08-03 15:06:30
您可以在DOM完全加载之前对其进行操作，但这可能存在风险。 您显然无法保证您尝试操作的DOM的位实际存在，因此您的代码可能会间歇性地失败。
解决方案3
1 2009-08-03 15:29:20
只要您只修改脚本块之前的节点（即节点的结束标记位于脚本的开始标记之前），就不会遇到任何问题。
如果要确保操作成功，请将代码包装在try...catch块中，并在失败时通过setTimeout()再次调用它。
解决方案4
0 2009-08-03 16:27:04
在Viajeros.com我有一个装载指示器工作8-9个月，到目前为止我没有问题。 它看起来像这样：
<body>
<script type="text/javascript">
try {
document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
document.getElementById("cargando").style.display = "block";
} catch(E) {};
</script>
解决方案5
-1 2012-06-22 07:33:51
在IE 5和Navigator 4中过早访问DOM会引发异常。
是否真的有必要等待DOM准备好操纵DOM？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.