blocks|key|1189339|text|你要找的是'outerHTML'，但我们需要一个后备，因为它与旧浏览器不兼容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189340|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)+==+"Test"|code-block|syntax|javascript|1189341|你可以在这里找到我的jQuery插件：Get+selected+element's+outer+HTML|offset|length|1189342|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html/20079340#20079340^0|0|0|J|X|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

What you're looking for is 'outerHTML', but wee need a fallback coz it's not compatible with old browsers.

<pre><code>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) == "&lt;p&gt;Test&lt;/p&gt;"
</code></pre>

You'll find my jQuery plugin here: <a href="https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html/20079340#20079340">Get selected element&#39;s outer HTML</a>

blocks|key|1189529|text|我认为你不需要任何复杂的脚本。只需使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189530|get_string=(el)=>el.outerHTML;|code-block|syntax|javascript|1189531|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I dont think you need any complicated script for this. Just use 

<pre><code>get_string=(el)=&gt;el.outerHTML;
</code></pre>

blocks|key|1404575|text|在FF中，您可以使用XMLSerializer对象将XML序列化为字符串。IE给你一个节点的xml属性。因此，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1404576|function+xml2string(node)+{
+++if+(typeof(XMLSerializer)+!==+'undefined')+{
++++++var+serializer+=+new+XMLSerializer();
++++++return+serializer.serializeToString(node);
+++}+else+if+(node.xml)+{
++++++return+node.xml;
+++}
}|code-block|syntax|javascript|1404577|entityMap^0|A|D|1A|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Under FF you can use the <code>XMLSerializer</code> object to serialize XML into a string. IE gives you an <code>xml</code> property of a node. So you can do the following:

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

blocks|key|1404934|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1404935|new+XMLSerializer().serializeToString(element);|code-block|syntax|javascript|1404936|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try 

<pre><code>new XMLSerializer().serializeToString(element);
</code></pre>

blocks|key|1404883|text|使用element.outerHTML获取元素的完整表示，包括外部标记和属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1404884|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|1189456|text|如果你的元素有父元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189457|element.parentElement.innerHTML|code-block|syntax|javascript|1189458|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If your element has parent

<pre><code>element.parentElement.innerHTML
</code></pre>

blocks|key|1405021|text|我发现在我的用例中，我并不总是想要整个outerHTML。许多节点都有太多的子节点无法显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1405022|下面是一个函数(在Chrome中进行了最小测试)：|1405023|/**
+*+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+%7C%7C+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+%2B=+"...";
++++}
++++return+ret;
}|code-block|syntax|javascript|1405024|https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec|offset|length|1405025|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

I've found that for my use-cases I don't always want the entire outerHTML. Many nodes just have too many children to show.

Here's a function (minimally tested in Chrome):

<pre><code>/**
 * 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 &gt; truncateLen) {
 ret += "...";
 }
 return ret;
}
</code></pre>

<a href="https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec" rel="nofollow noreferrer">https://gist.github.com/kahunacohen/467f5cc259b5d4a85eb201518dcb15ec</a>

blocks|key|1404712|text|我已经浪费了很多时间来找出当我用接受的答案中的代码遍历DOMElements时哪里出了问题。这就是对我有效的方法，否则每两个元素就会从文档中消失：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1404713|_getGpxString:+function(node)+{
++++++++++clone+=+node.cloneNode(true);
++++++++++var+tmp+=+document.createElement("div");
++++++++++tmp.appendChild(clone);
++++++++++return+tmp.innerHTML;
++++++++},|code-block|syntax|javascript|1404714|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

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

blocks|key|1189626|text|如果使用react：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1189627|const+html+=+ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;|code-block|syntax|javascript|1189628|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

if using react:

<pre><code>const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;
</code></pre>

Javascript: I have the DOM representation of a node (element or document) and I'm looking for the string representation of it. E.g.,

<pre><code>var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));
</code></pre>

should yield:

<pre><code>get_string(el) == "&lt;p&gt;Test&lt;/p&gt;";
</code></pre>

I have the strong feeling, that I'm missing something trivially simple, but I just don't find a method that works in IE, FF, Safari and Opera. Therefore, outerHTML is no option.

Get the string representation of a DOM node

jQuery

Javascript:我有节点(元素或文档)的DOM表示，我正在寻找它的字符串表示。例如，var el = document.createElement("p");el.appendChild(document.createTextNode("Test"));应该会产生：get_string(el) == "Test";我有一种强烈的感觉，我错过了一些微不足道的简单的东西，但我就是找

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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