不使用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

在现代浏览器上，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>

Answer 3

我想你想要这个：

someElement.textContent