获取 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);

Answer 7

您可以简单地在元素上使用 outerHTML 属性。它会返回你想要的。

让我们创建一个名为 get_string(element) 的函数

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

function get_string(element) {
 console.log(element.outerHTML);
}

get_string(el); // your desired output

Answer 8

使用 element.outerHTML 获取元素的完整表示，包括外部标签和属性。

Answer 9

如果你的元素有父元素

element.parentElement.innerHTML

Answer 10

我发现对于我的用例，我并不总是需要整个outerHTML。许多节点有太多的子节点无法显示。

这是一个函数（在 Chrome 中进行了最低限度的测试）：

/**
 * Stringifies a DOM node.
 * @param {Object} el - A DOM node.
 * @param {Number} truncate - How much to truncate innerHTML of element.
 * @returns {String} - A stringified node with attributes
 *                     retained.
 */
function stringifyEl(el, truncate) {
    var truncateLen = truncate || 50;
    var outerHTML = el.outerHTML;
    var ret = outerHTML;
    ret = ret.substring(0, truncateLen);

    // If we've truncated, add an elipsis.
    if (outerHTML.length > truncateLen) {
      ret += "...";
    }
    return ret;
}

https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec< /a>

Answer 11

当我使用接受的答案中的代码迭代 DOMElements 时，我浪费了很多时间来找出问题所在。这对我有用，否则每隔一个元素就会从文档中消失：

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

Answer 12

虽然 outerHTML 通常是答案，但对于 Attr 和 Text（Node 接口的子类），有其他属性：

(<Element>x).outerHTML
(<Text>x).data
(<Attr>x).value;

请参阅 https://developer.mozilla.org/en- US/docs/Web/API/Node 用于更多类型的节点，例如 DocumentFragment 和 Comment

Answer 13

如果使用反应：

const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;