Javascript 返回节点内的所有HTML元素

我有一个代码，可以将所有元素都放在身体内：

const elements = document.querySelectorAll('body');

我所要做的就是将body元素中存在的所有内容存储在一个变量中，为此我尝试使用textContent：

问题是这个命令只返回文本，不包括html标记

就我正在分析的页面主体而言，它有几个元素，如页眉、页脚、div、链接。。。在每一个元素中，都有其他元素和文本

我想返回的所有内容都是以html格式存在于正文下面的元素及其各自的文本。例如：

<p>Hi World</p>
<div class="none"><a href="#">click me</a></div>
<strong>Yes, sir...</strong>

如何才能做到这一点？

使用HTMLElement.innerHTML获取元素的内容，包括HTML标记

并使用body*选择器获取所有子项

见：

让数据=[]； document.querySelectorAll'body*'。forEachelement=>{ 数据推送{ 标记名：element.tagName.toLowerCase， 内容：element.innerHTML.trim }; }; 控制台日志数据； 嗨，世界

---

是的，先生…超级简单的方法：var c=document.body.children；现在，您已将主体中的每个节点存储在c变量中，该变量基本上是一个数组，因此您可以像通常使用数组一样访问每个节点。

节点中的HTML元素有以下几点含义：

作为节点的直接子级的元素 节点内所有深度的所有元素 接下来，将节点列表转换为有用数据列表：

const data = Array.from(elements).map(el => {
  return {
    tagName: el.tagName,
    textContentWithHtmlTags: el.innerHTML,
  }
})

const node = document.querySelector('body')

const childrenElements = node.children

// const allElements = document.querySelectorAll('body *')
const allElements = node.querySelectorAll('*')

const data = Array.from(elements).map(el => {
  return {
    tagName: el.tagName,
    textContentWithHtmlTags: el.innerHTML,
  }
})