我需要在加載后更改頁面。
源結構在這里：
<div id='content'>
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<p>...</p>
</div>
我需要將它重建為這個：
<div id='content'>
<div>
<div>
<h1>...</h1>
<div>
<p>...</p>
</div>
</div>
</div>
<div>
<div>
<h1>...</h1>
<div>
<p>...</p>
</div>
</div>
</div>
<div>
<div>
<h1>...</h1>
<div>
<p>...</p>
</div>
</div>
</div>
</div>
這是我的演算法：
const createComplexNode = () => {
const parentBlock = document.querySelector('#content')
const parentContent = parentBlock.querySelectorAll('h1, p')
if (parentContent.length === 0) return
const mainNode = document.createElement('div')
const titleNode = document.createElement('div')
const bodyNode = document.createElement('div')
mainNode.className = 'desc-container'
titleNode.className = 'desc-head'
bodyNode.className = 'desc-body'
const indexes = getIndex(parentContent)
console.log(parentContent[indexes.start])
titleNode.appendChild(parentContent[indexes.start])
for (let i = 1; i <= indexes.end; i ) {
bodyNode.appendChild(parentContent[i])
}
mainNode
.appendChild(titleNode)
.appendChild(bodyNode)
parentBlock.appendChild(mainNode)
return createComplexNode()
}
const getIndex = nodeList => {
const indexes = {
start: -1,
end: -1,
}
const regex = new RegExp('h?')
for (let i = 0; i < nodeList.length; i ) {
if (regex.test(nodeList[i].localName) && indexes.start < 0) {
indexes.start = i
}
if (nodeList[i].localName === 'p') {
indexes.end = i
break
}
}
return indexes
}
我的主要問題在這里const parentContent = parentBlock.querySelectorAll('h1, p')。
它作業正常，但僅限于第一個周期。因為，這個函式會捕獲父節點中的所有標簽以及已經包裝好的元素。這是因為無限遞回。我該如何預防？
uj5u.com熱心網友回復：
使用一些用于查詢和創建 DOM 元素的實用函式，以及.append()方法：
// DOM Utility functions:
const EL = (sel, el) => (el || document).querySelector(sel);
const ELS = (sel, el) => (el || document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
// Recreate DOM:
const EL_content = EL("#content");
const ELS_h1 = ELS("h1", EL_content);
ELS_h1.forEach(EL_h1 => {
const EL_div_outer = ELNew("div", {className: "wrapper-outer"});
const EL_div_inner = ELNew("div", {className: "wrapper-inner"});
const EL_div_parag = ELNew("div", {className: "wrapper-parag"});
const EL_p = EL_h1.nextElementSibling;
EL_div_outer.append(EL_div_inner);
EL_div_inner.append(EL_h1, EL_div_parag);
EL_div_parag.append(EL_p);
EL_content.append(EL_div_outer);
});div { padding: 10px; background: rgba(0,0,0, 0.1); }<div id="content">
<h1>Title 1</h1>
<p>Paragraph 1</p>
<h1>Title 2</h1>
<p>Paragraph 2</p>
<h1>Title 3</h1>
<p>Paragraph 3</p>
</div>怎么運行的：
- 定位
h1內部的所有元素"#content"并使用NodeList.prototype.forEach()回圈它們 - 在回圈中，收集
h1的下一個兄弟p使用元素Element.nextElementSibling。 - 使用Document.createElement()（使用實用程式
ELNew函式）創建所需的包裝器 - 用于
.append()在彼此內部移動元素，并將它們重新插入到父元素"#content"
代碼非常簡潔、干凈，而且應該是不言自明的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/398279.html
標籤：javascript dom