当前位置：文江博客话题详情

如何在 DOM 树显示在屏幕上之前对其进行操作？（javascript、jquery、...）

发布于 2024-10-03 02:49:58 字数 322 浏览 5 评论 0原文

问题很简单，但是想不出解决办法。非常感谢那些提供帮助的人。我想在网页（DOM 树）显示在屏幕上之前对其进行修改。据我了解，DOM 树在处理之前已完全加载到内存中。

你们中有人知道如何在内存中处理这个完全加载的 DOM 树吗然后让它以新的结构显示？

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

添加->只是需要提一下，现有的网站不是我的，所以我不能使用php来修改不是我的网站内容。

但现在，该网站显示没有插件内容你会在 1 秒后看到内容（因为我在网站已经显示后附加内容），所以你会看到网站内容在移动。

谢谢你的帮助。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2024-10-10 02:49:58

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

简短的例子：

<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>

关于布拉德下面的评论，你可以考虑是否还有其他方法。由于真正的问题似乎是移动内容，因此可以在动态内容稍后出现的地方放置一个静态占位符。

It's not very difficult. Just hide the body using CSS and on the onload-event of the document do your manipulation and show the body.

Short example:

<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>

In regard to Brad's comment below you may consider if there may be other ways. As the real issue seems to be the moving content, it could be possible to place a static placeholder where the dynamic content will appear later.

回复收藏 0 原文

忆沫 2024-10-10 02:49:58

您在标签中提到了 PHP，那么为什么不在服务器端构建您的文档呢？那么，就没有关系了。

如果您必须在客户端执行此操作，那么我也不会担心这一点。无论如何，网页都是逐步呈现的。也许您拥有一台速度很快的计算机并且可以快速连接到服务器，但我向您保证您的大多数用户都没有。

只需在 DOM 准备好增强页面的位置添加一些代码即可。相关：Javascript DOM 已准备就绪，无需整个框架

回复收藏 0 原文

相守太难 2024-10-10 02:49:58

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

JavaScript 只能在加载 DOM 后对其进行操作。

如需任何进一步的帮助，您必须提供更具体的示例:-)

回复收藏 0 原文

踏雪无痕 2024-10-10 02:49:58

我终于找到了解决办法。

我制作了查看网页导航的插件。事实上，它会查看 url 更改，以便我知道用户正在移动到不同的位置（因此我知道在获得网页的“加载”事件之前我必须做一些事情）。

然后我尝试使用循环访问一个元素（我知道该元素将位于 DOM 中，如标题）。然后，当该元素出现时（在“加载”事件之前），我插入代码并停止循环/监听。

如果有人需要有关如何完成这一切的更多详细信息，我很乐意回答您的问题。

谢谢。

回复收藏 0 原文

趁微风不噪 2024-10-10 02:49:58

在文档头部的脚本中执行以下操作：

<script>
// this executes inline
document.documentElement.style.display = "none";
document.addEventListener("DOMContentLoaded",() => {
   /* enter your code to manipulate DOM here */
   document.documentElement.style.display = "unset";
});
</script>

或者，

<script>
// this executes inline
document.documentElement.style.display = "none";
</script>

<script type="module">
// this waits until the entire DOM is loaded
/* enter your code to manipulate DOM here */
document.documentElement.style.display = "unset";
</script>

In a script in the head of the document do this:

<script>
// this executes inline
document.documentElement.style.display = "none";
document.addEventListener("DOMContentLoaded",() => {
   /* enter your code to manipulate DOM here */
   document.documentElement.style.display = "unset";
});
</script>

Alternatively,

<script>
// this executes inline
document.documentElement.style.display = "none";
</script>

<script type="module">
// this waits until the entire DOM is loaded
/* enter your code to manipulate DOM here */
document.documentElement.style.display = "unset";
</script>

回复收藏 0 原文

~没有更多了~