获取DOM节点的字符串表示形式

Question

Javascript:我有一个节点(元素或文档)的DOM表示,我正在寻找它的字符串表示.例如,

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

应该产量:

get_string(el) == "<p>Test</p>";

我有强烈的感觉,我错过了一些简单的东西,但我找不到一个适用于IE,FF,Safari和Opera的方法.因此,outerHTML是没有选择的.

Answer 1

您可以创建一个临时父节点,并获取它的innerHTML内容:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

编辑: 请参阅下面有关outerHTML的答案.el.outerHTML应该是所有需要的.

Answer 2

您正在寻找的是'outerHTML',但我们需要一个后备因素,因为它与旧浏览器不兼容.

var getString = (function() {
  var DIV = document.createElement("div");

  if ('outerHTML' in DIV)
    return function(node) {
      return node.outerHTML;
    };

  return function(node) {
    var div = DIV.cloneNode();
    div.appendChild(node.cloneNode(true));
    return div.innerHTML;
  };

})();

// getString(el) == "<p>Test</p>"

你会在这里找到我的jQuery插件:获取所选元素的外部HTML

Answer 3

我不认为你需要任何复杂的脚本.只是用

get_string=(el)=>el.outerHTML;

Answer 4

在FF下,您可以使用该XMLSerializer对象将XML序列化为字符串.IE为您xml提供节点的属性.所以你可以做到以下几点:

function xml2string(node) {
   if (typeof(XMLSerializer) !== 'undefined') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Answer 5

使用Element#outerHTML:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

它也可以用于编写DOM元素.来自Mozilla的文档:

元素DOM接口的outerHTML属性获取描述元素(包括其后代)的序列化HTML片段.可以将其设置为使用从给定字符串解析的节点替换元素.

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 6

尝试

new XMLSerializer().serializeToString(element);