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

Javascript：我有一个节点（元素或文档）的DOM表示，我正在寻找它的字符串表示。例如：

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

应产生：

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

get_字符串（el）=“测试”
”；

---

我有一种强烈的感觉，我错过了一些非常简单的东西，但我就是找不到一种在IE、FF、Safari和Opera中有效的方法。因此，outerHTML没有选项。

您可以创建一个临时父节点，并获取它的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>

var el=document.createElement（“p”）；
el.appendChild（document.createTextNode（“Test”）；
var tmp=document.createElement（“div”）；
tmp.appendChild（el）；
console.log（tmp.innerHTML）；// 试验

编辑：

---

请参阅下面关于outerHTML的答案。el.outerHTML应该是所需的全部。

在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;
   }
}

---

您正在寻找的是“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>"

var getString=（函数（）{
var DIV=document.createElement（“DIV”）；
if（DIV中的“outerHTML”）
返回函数（节点）{
return node.outerHTML；
};
返回函数（节点）{
var div=div.cloneNode（）；
div.appendChild（node.cloneNode（true））；
返回div.innerHTML；
};
})();
//getString（el）=“测试”

---

您可以在这里找到我的jQuery插件：

当我使用公认答案中的代码迭代domeElement时，我已经浪费了很多时间来找出问题所在。这对我来说很有用，否则每一个元素都会从文档中消失：

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

---

如果元素具有父元素

element.parentElement.innerHTML

---

我认为你不需要任何复杂的剧本。只用

get_string=(el)=>el.outerHTML;

---

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

使用element#outerHTML:

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

console.log(el.outerHTML);

它还可以用于编写DOM元素。来自Mozilla的文档：

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

如果使用react：

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

试一试

---

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

以下是一个功能（在Chrome中进行了最低限度的测试）：

---

您只需在元素上使用outerHTML属性即可。它会回报你想要的

让我们创建一个名为

获取字符串（元素）

var el=document.createElement（“p”）；
el.appendChild（document.createTextNode（“Test”）；
函数get_字符串（元素）{
console.log（element.outerHTML）；
}
获取字符串（el）；//您想要的输出

Ouch。这么简单。。。请注意：如果我希望整个文档“字符串化”，我可以对document.documentElement使用相同的方法（用例：AJAX请求）。也许你可以在答案中加入这一点？@Boldewyn：你可以将整个

document.documentElement

附加到一个div中？我的天啊…很简单，就像地狱一样+1太糟糕了documentFragment不支持innerHTMLouterHTML是答案不要忘记在将

元素添加到
tmp
之前克隆它，因为当您将它添加到
tmp
时，它将从
文档中删除。仅供参考
。xml
在DOM节点上不起作用（与当前页面中的节点一样）。它只适用于XML DOM文档节点，相反，
outerHTML
不适用于XML DOM文档节点。它仅适用于DOM节点（如当前页面中的节点）。我想说的是一致性很好。大概11版Firefox也支持outerHTML：现在看来，IE、FF、Safari、Chrome、Opera都支持outerHTML，是的，它现在（从2009年开始）已经变成了一项琐碎的任务：）是的，在我问了这个问题之后，肯定是outerHTMLFirefox在11版中添加了
outerHTML
。所以那不是当时的选择。如果你仔细看的话，我甚至用适当的注释更新了我的问题。这是正确的，因为如果使用
innerHtml
@SergeyPanfilov，你会删除元素id和其他属性：我没有删除任何内容，因为我在调用
innerHtml
；之前将节点包装在一个空div中）在2015年，我想说这绝对是最好的答案。是的，到今天为止，只有非常古老的（IE>10，Safari>7，真正古老的FF，Chrome）和/或晦涩难懂的浏览器（Opera Mini）不支持
outerHTML
属性。你看，当我假设你有一个不同的问题时，我并不是孤注一掷。请注意，上述解决方案将从DOM中删除原始元素。因此，当您使用像
document.getElementsByTagName（）
这样的实时集合时，该集合将在
循环的中间改变，因此会跳过每一个元素。谢谢您的回答！不幸的是，这已经被提出了，但是回答者删除了答案。问题是，父级可能包含比所需多得多的标记。考虑列表中单个
的outerHTML；这是一个DOM标准。看看@Rich apodica的答案。是的。。。我回答中的兴趣点（如果使用react）是
reactdom.findDOMNode（）
，不是
.outerHTML
，而是感谢您的职位。感谢您的建议，但这正是Bryan Kale在回答中提出的建议。这是今天我们可以简单使用outerHTML的最佳答案
new XMLSerializer().serializeToString(element);

/**
 * 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;
}