返回节点内的所有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) => { 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> -
墨色风雨
“ 节点内的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, }}) -
侃侃无极
超级简单的方法：var c = document.body.children;现在你已经在你的“c”变量中存储了身体中的每个节点，这个变量基本上是一个数组，所以你可以像访问数组那样访问每个节点。
随时随地看视频慕课网APP
相关分类
JavaScript