Question

我有这段代码将所有元素都包含在体内：

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

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

'tagName': elements[i].tagName, 
'textContentWithHtmlTags': elements[i].textContent,

问题在于此命令仅向我返回文本，不包括html标记。

对于我正在分析的页面正文，它包含多个元素，例如header，footer，divs，links ...每个元素都有其他元素和文字。

我要返回的所有内容都是存在于正文下方的元素，它们为html格式，并带有各自的文本。例如：

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

我该怎么做？

Answer 1

“ 节点内的HTML元素”有一些含义：

是节点直接子元素的元素
节点内所有深度的所有元素

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,
  }
})

Answer 2

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

并使用body *选择器来获取所有<body>个孩子。

请参阅：

let data = [];

document.querySelectorAll('body *').forEach((element) => {
  data.push({
    tagName: element.tagName.toLowerCase(),
    content: element.innerHTML.trim()
  });
});

console.log(data);

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

Answer 3

超级简单的方法：
var c = document.body.children;
现在，您已经将主体中的每个节点存储在“ c”变量中，该变量基本上是一个数组，因此您可以像平常一样访问每个节点带有数组。

返回节点内的所有HTML元素

3 个答案: