Javascript：我有一个节点（元素或文档）的 DOM 表示，我正在寻找它的字符串表示。例如，
var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
应该产生：
get_string(el) == "<p>Test</p>";
我有强烈的感觉，我错过了一些微不足道的简单的东西，但我只是没有找到适用于 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>
编辑： 请参阅下面关于 outerHTML 的答案。el.outerHTML 应该是所需要的。
您正在寻找的是“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 插件：Get selected element's external HTML
我认为您不需要任何复杂的脚本。只需使用
get_string=(el)=>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 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
尝试
new XMLSerializer().serializeToString(element);
使用 element.outerHTML 获取元素的完整表示，包括外部标签和属性。
如果您的元素有父元素
element.parentElement.innerHTML
您可以简单地在元素上使用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
我发现对于我的用例，我并不总是想要整个 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
当我使用已接受答案中的代码遍历 DOMElements 时，我浪费了很多时间来找出问题所在。这对我有用，否则每隔一个元素就会从文档中消失：
_getGpxString: function(node) {
clone = node.cloneNode(true);
var tmp = document.createElement("div");
tmp.appendChild(clone);
return tmp.innerHTML;
},
如果使用反应：
const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;