如何在屏幕上显示DOM树之前对其进行操作? (javascript,jquery,...)

时间:2010-11-15 16:39:59

标签: javascript dom memory add-on

问题很简单,但无法找到解决方案。非常感谢那些帮助的人。 我想在屏幕上显示之前修改网页(DOM树)。 我知道DOM树在处理之前已完全加载到内存中。

你们中的任何人都知道在内存上处理这个完全加载的DOM树的方法 然后让它以新结构显示?

我想这样做的原因是因为我正在开发一个向现有网站添加内容的插件。

added->只需要提一下现有的网站不是我的,所以我不能用php修改网站内容不是我的。

但是现在,显示的网站没有插件内容 并且您看到内容在1秒后出现(因为我在网站已经显示后附加了内容),所以您看到网站内容正在移动。

感谢您的帮助。

4 个答案:

答案 0 :(得分:4)

这不是很困难。只需使用CSS隐藏正文,然后在文档的onload-event上进行操作并显示正文。

简短的例子:

<html>
<head>
<title>example</title>
<style type="text/css">
<!--
html.scripted body{display:none;}
-->
</style>
<script type="text/javascript">
<!--
//set class for html-element, so the css-rule above will be applied to the body
document.getElementsByTagName('html')[0].className='scripted';

//on page load
window.onload=function()
{
  //do the manipulation
  document.body.appendChild(document.createElement('em')).appendChild(document.createTextNode('dynamic content'));
  alert('manipulation done');

  //show the body
  document.body.style.display='block';
}
//-->
</script>
</head>
<body>
static content
</body>
</html>

关于Brad的评论,您可以考虑是否有其他方式。由于真正的问题似乎是移动内容,因此可以放置静态占位符,动态内容将在稍后出现。

答案 1 :(得分:1)

您在标签中提到PHP,那么为什么不在服务器端构建文档呢?然后,没关系。

如果你必须做这个客户端,那么我也不会担心这个。无论如何,网页都是逐步呈现的。也许您拥有一台快速的计算机并可以快速连接到您的服务器,但我保证您的大多数用户都没有。

只需将一些代码添加到DOM准备进行页面增强的位。相关:Javascript DOM ready without an entire framework

答案 2 :(得分:0)

在加载DOM之前操作DOM的唯一方法是使用像php这样的预处理器。

Javascript只能在加载后操纵它。

除此之外的任何进一步帮助,您必须提供更具体的示例: - )

答案 3 :(得分:0)

我终于找到了解决方案。

我让插件看着网页导航。实际上,它会查看网址更改,以便我知道用户正在移动到其他位置(因此我知道在我收到网页的'加载'事件之前我必须做一些事情。)

然后我尝试使用循环访问一个元素(我知道将在DOM中,如标题)。然后当元素出现时(在'Load'事件之前),我插入代码并停止循环/监听。

如果有人需要更多详细信息,我很乐意回答你的问题。

感谢。