通过javascript检索网页的实际DOM/css状态

Retrieving the actual DOM/css state of a web page through javascript

本文关键字：DOM css 状态 javascript 检索 网页 通过      更新时间：2023-09-26

如您所知，网页是html文件，一个或多个css文件以及一个或多个javascript文件的联合：浏览器解析前两个元素以生成DOM和其他对页面渲染有用的数据结构。

Javascript文件由引擎执行，它们可以更改DOM或与css相关的数据结构的值，因此，在javascript执行之后，网页的"实际状态"可以不同于原始html和css代码静态描述的内容。

我需要开发一个 firefox 插件，它可以抓取网页的"实际状态"并将其存储到磁盘上，作为几个 html + css 文件。

对于html文件非常简单，我需要序列化DOM。我担心的是 css：我可以遍历 DOM 并为每个元素获取其样式表，但它将是速度极慢，并生成未优化的 CSS 代码。

让我们举个例子

我有这个 html 代码：

<html>
    <head>
         <title>Test</title>
         <link type="text/css" rel="stylesheet" href="style.css"  />
         <script type='text/javascript' src="changebackground.js" > </script>
    </head> 
    <body>
         <div  class="divclass" > 
            <form> 
                <h2>click to change the background</h2>
                <input type="button" value="version" onclick="changebg()" />
            </form>
         </div>
    </body>

样式.css有以下定义：

.divclass{
          margin: .5in; 
          height: 400px;
}
body{
      background-color: white;
      color: blueviolet;
}

而 changeBackground 有这样的代码： 

function changebg() {
     document.body.style.backgroundColor = 'black';
 }

显然，单击按钮后，背景的颜色变为黑色。我的目标是编写一个附加组件，在此更改之后，通过样式的修改将 css 返回给我，即：

.divclass{
          margin: .5in; 
          height: 400px;
}
body{
      background-color: black;
      color: blueviolet;
}

有什么想法吗？

您实际上不需要遍历任何内容。内联样式已经是其中的一部分，因此您可以免费获得，例如：

elem.style.width = "100px";
elem.outerHTML == '<elem style="width: 100px;>";

因此，要生成当前 DOM 的"转储"，包括内联样式等，请执行以下操作：

var html = document.documentElement.outerHTML;

您可能还想序列化document.doctype 。

万一脚本实际上弄乱了外部样式表(<link rel="stylesheet">，您可以执行类似我在"获取修改样式表的文本"中描述的操作来获取当前的规则集。同样，内联样式(<style>和style=属性(已经存在于.outerHTML中。

编辑：您现在问的是不可能的，因为这不是内联样式的工作方式。考虑以下 html 片段：

<div>first div</div>
<div>second div</div>

现在运行以下代码：

document.querySelector("div").style.background = "black";

这将导致第一个div 具有内联样式：

<div style="background: none repeat scroll 0% 0% black;">first div</div>
<div>second div</div>

演示小提琴

这个规则会是什么样子？ div { background: black; }显然是错误的，因为这会影响所有div。

您可以生成新的类和/或 id，但随后您需要操作和存储 DOM，并且可能首先使用我的原始答案。

相关文章：