Question

我的任务是：

给定一个URL，解析其html页面（简单），提取所有javascripts（简单），并分析每个javascript正在做什么/每个javascript如何更改DOM。

我尝试过：各种JavaScript引擎 - 不会帮助，不了解DOM phantomjs / casperjs - page.evaluateJavaScript API看起来很有前途，但无法让它工作，无处可寻找任何文档/示例

任何建议都非常感谢。谢谢。

Answer 1

您似乎在寻找MutationObserver。这种方法允许您注册您的代码将被告知有关DOM的更改。

您似乎需要在每个要知道的元素上设置MutationObserver，如果它发生变化。为此，您需要遍历DOM，将MutationObservers添加到元素中。

通常，您应该避免在大多数生产代码中使用MutationObservers，因为它们会显着影响性能。但是，听起来你想要专门研究一些代码的操作，而不是在常规使用中使用它。为此，它们应该没问题。

A brief overview
A more in-depth discussion
A screencast by Chromium developer Rafael Weinstein
The mutation summary library
定义MutationObserver接口的T he DOM standard
Old Mutation events interface

示例代码：

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

附加阅读和上述代码列表取自MutationObserver page on MDN。该页面将示例代码的来源列为this blog post。

编辑2：

对于您所描述的如此庞大的任务（＆＃34;可编程扫描数千个网站＆＃34;），您可能更容易下载Firefox的源代码并修改该代码以记录更改每个页面的JavaScript都会生成页面的DOM。这可以非常合理地记录哪个代码段，哪个函数，甚至源代码中的哪个行号都在进行更改。

您希望＆＃34;可编程扫描数千个网站＆＃34;。这不是一个小项目，需要大量的自动化工具。存在用于自动化浏览器操作的工具（例如Selenium）。浏览器已经所有解释JavaScript代码并对DOM进行更改，同时知道正好代码的哪一行/函数正在进行更改。对公开可用的源代码进行最小的更改，只是转发到控制台发生更改，更改的行/功能等等是 easy 解决方案。浏览器已将函数/行转储到控制台以获取JavaScript异常。所有这些都需要对源代码进行微小的更改，以调用将JavaScript函数和行号转储到控制台的现有函数。控制台可以是redirected to store output in a file。

Answer 2

在我的脑海中，有几种方法可以查看一段JavaScript代码并找出正在更改的元素。

// Single Element
    var elementById = document.getElementById("elementID"); // Reference by ID
    var elementByClass = document.getElementByClass("elementClass"); // Reference by Class
    var elementByTag = document.getElementByTagName("elementTag"); // Reference by Tag Name

// Multipe Element
    var elementsByClass = document.getElementsByClassName("elementsClass"); // Reference by Class
    var elementsByTag = document.getElementsByTagName("elementsTag"); // Reference by Tag

如果您需要进一步的帮助，请更直接地提出您的问题。

如何扫描数千个网站并分析每个网站的JavaScript对网页的DOM所做的更改

2 个答案:

编辑2：