猿问

返回节点内的所有HTML元素

我有这个代码，可以获取正文中的所有元素：


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>

我怎样才能做到这一点 ？


慕容3067478
浏览 597回答 3
3回答

繁星淼淼

使用HTMLElement.innerHTML得到一个元素的内容，HTML标记包括在内。并使用body *选择器来获得所有<body>孩子。看到：let data = [];document.querySelectorAll('body *').forEach((element) => {&nbsp; data.push({&nbsp; &nbsp; tagName: element.tagName.toLowerCase(),&nbsp; &nbsp; content: element.innerHTML.trim()&nbsp; });});console.log(data);<p>Hi World</p><div class="none"><a href="#">click me</a></div><strong>Yes, sir...</strong>
0

墨色风雨

“&nbsp;节点内的HTML元素&nbsp;”有几个含义：作为节点的直接子节点的元素所有深度的节点内的所有元素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 => {&nbsp; return {&nbsp; &nbsp; tagName: el.tagName,&nbsp; &nbsp; textContentWithHtmlTags: el.innerHTML,&nbsp; }})
0

侃侃无极

超级简单的方法：var c = document.body.children;现在你已经在你的“c”变量中存储了身体中的每个节点，这个变量基本上是一个数组，所以你可以像访问数组那样访问每个节点。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答