Get the string representation of a DOM node

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

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

应该放弃:

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

我有一种强烈的感觉，我错过了一些微不足道的简单的东西，但我就是找不到一个方法，可以在 IE，FF，Safari 和 Opera 中工作。因此，outerHTML 是没有选择的。

162419 次浏览
小开
最佳答案

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

编辑: 请参阅下面关于 outHTML.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;
}
}
小开

你要寻找的是“外部 HTML”，但我们需要一个备用，因为它不兼容旧的浏览器。

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>"

You'll find my jQuery plugin here: 获取选定的元素 & # 39; s 外部 HTML

小开

I have wasted a lot of time figuring out what is wrong when I iterate through DOMElements with the code in the accepted answer. This is what worked for me, otherwise every second element disappears from the document:

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

If your element has parent

element.parentElement.innerHTML
小开

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

get_string=(el)=>el.outerHTML;
小开

Use element.outerHTML to get full representation of element, including outer tags and attributes.

小开

使用元素 # outerHTML:

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


console.log(el.outerHTML);

它还可以用来编写 DOM 元素:

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

Https://developer.mozilla.org/en-us/docs/web/api/element/outerhtml

小开

如使用反应物:

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

试试看

new XMLSerializer().serializeToString(element);
小开

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

Here's a function (minimally tested in 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

小开

您可以简单地在元素上使用 外部 HTML属性，它将返回您想要的结果。

让我们创建一个名为 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
enter image description here

小开

虽然 outerHTML通常是答案，但对于 Attr和 Text(Node接口的子类) ，还有其他属性:

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

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


提交答案