javascript - 获取 [object XrayWrapper [object HTMLDivElement]] 对象的 innerHTML

Question

在我的用户脚本中，我创建了一个 document.createElement 的钩子(Hook)，我使用的代码是 Brock adams 在下面的帖子中提供的解决方案

Log a web page's dynamically-created, DOM elements with a userscript

现在当我在 firefox 中运行这个用户脚本并打印 elem在 LogNewTagCreations ()像这样的方法 console.log(elem)我得到的输出为 [object XrayWrapper [object HTMLDivElement]]以这种格式。现在我怎样才能得到 innerHTML像这样的标签或整个标签的属性 <div>Sometext</div>这样我就可以得到innerHTML从此

Answer 1

看起来 Greasemonkey 用来包裹 DOM 元素 的 XrayWrapper 是一个非常不完美的包装器，因为它并不真正支持 innerHTML setter/getter / setter/getter 。

我给你写了一个简单的递归 innerHTML 实现，这样调用它:html(element)。它会忽略除元素、属性和文本节点以外的所有内容，但只要 XrayWrapper 支持我在函数中使用的其他 DOM 属性，它就应该达到它的目的。

var html = (function() {
  var ELEMENT = this.Node?Node.ELEMENT_NODE:1,
         TEXT = this.Node?Node.TEXT_NODE:   3;
  return function html(el, outer) {
    var i = 0, j = el.childNodes, k = outer?"<" + (m = el.nodeName.toLowerCase()) + attr(el) + ">":"",
        l = j.length, m, n;
    while(i !== l) switch((n = j[i++]).nodeType) {
      case ELEMENT: k += html(n, true); break;
      case TEXT:    k += n.nodeValue;
    } return k + (outer?"</" + m + ">":"");
  }; function attr(el) {
    var i = 0, j = el.attributes, k = new Array(l = j.length), l, m;
    while(i !== l) k[i] = (m = j[i++].nodeName) + "=\"" + el.getAttribute(m) + "\"";
    return (l?" ":"") + k.join(" ");
  }
})();