不使用innerHTML获取innerHTML

Question

我知道innerHTML应该很讨厌(让我们不要开始争论了。我们正试图在我的工作中逐步淘汰它)，但我需要能够获得一些HTML的纯文本版本。现在我有台词了。

bodycontents = document.getElementById("renderzone").innerHTML;

但是我想知道，比如说，如果没有innerHTML，我将如何获得相同的结果。我不怕DOM操作(我已经做过很多次了)，所以请在回答问题时尽量使用技术性的方法。

Answer 1

在不使用element.innerHTML属性的情况下检索HTML内容中的元素听起来像是一项学术研究，不太可能有简单的解决方案。

基于DOM的方法需要像递归遍历这样的东西来检索所有子节点，附加它们的文本内容，并序列化元素名称和属性。例如(在JavaScript/DOM伪代码中)：

var getHtmlContent(el, str) {
  str += '<' + el.nodeName;
  foreach (attr in el.attribute) {
    str += attr.name + '="' + escapeAttrVal(attr.value) + '"';
  }
  str += '>';
  foreach (node in el.childNodes) {
    if (node.isTextNode()) {
      str += node.textContent;
    } else {
      str += getHtmlContent(node, str);
    }
  }
  str += '</' + el.nodeName + '>';
  return str;
}
getHtmlContent(myElement, ''); // '<div id="myElement" class="foo">Text<div...'

Answer 2

我想你想要的是：

someElement.textContent

Answer 3

在现代浏览器上，XMLSerializer可能会帮助您：

​

var el = document.getElementById('my-id');
var html_string = new XMLSerializer().serializeToString(el);
console.log(html_string);

<p id="my-id">Greetings Friends</p>

​