首頁(yè) 猿問返回節(jié)點(diǎn)內(nèi)的所有HTML元素

返回節(jié)點(diǎn)內(nèi)的所有HTML元素

JavaScript

慕容3067478 2019-04-17 13:15:10

我有這個(gè)代碼，可以獲取正文中的所有元素：const elements = document.querySelectorAll('body');我想要做的就是存儲(chǔ)body元素中存在的變量，為此我嘗試使用textContent：'tagName': elements[i].tagName, 'textContentWithHtmlTags': elements[i].textContent,問題是這個(gè)命令只返回文本，不包括html標(biāo)簽。在此，我分析頁(yè)面的主體的情況下，它有幾個(gè)元素，例如header，footer，divs，links...并在每一個(gè)要素，它有其他元素和文本。我想要返回的是身體下方存在的元素，以html格式及其各自的文本。舉個(gè)例子：<p>Hi World</p><div class="none"><a href="#">click me</a></div><strong>Yes, sir...</strong>我怎樣才能做到這一點(diǎn) ？

查看完整描述

3 回答

繁星淼淼

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊

使用HTMLElement.innerHTML得到一個(gè)元素的內(nèi)容，HTML標(biāo)記包括在內(nèi)。

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

反對(duì) 回復(fù) 2019-05-17

墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊

“ 節(jié)點(diǎn)內(nèi)的HTML元素 ”有幾個(gè)含義：

作為節(jié)點(diǎn)的直接子節(jié)點(diǎn)的元素
所有深度的節(jié)點(diǎn)內(nèi)的所有元素

const node = document.querySelector('body')

const childrenElements = node.children

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

const allElements = node.querySelectorAll('*')

接下來，將節(jié)點(diǎn)列表轉(zhuǎn)換為有用數(shù)據(jù)列表：

const data = Array.from(elements).map(el => {

return {

tagName: el.tagName,

textContentWithHtmlTags: el.innerHTML,

}

})

反對(duì) 回復(fù) 2019-05-17

侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

超級(jí)簡(jiǎn)單的方法：
var c = document.body.children;
現(xiàn)在你已經(jīng)在你的“c”變量中存儲(chǔ)了身體中的每個(gè)節(jié)點(diǎn)，這個(gè)變量基本上是一個(gè)數(shù)組，所以你可以像訪問數(shù)組那樣訪問每個(gè)節(jié)點(diǎn)。

反對(duì) 回復(fù) 2019-05-17