我的頁面結構如下：
<body>
<div class="one">
<div class="two">
<p class="three">Some text</p>
</div>
</div>
<div class="four">
<div class="five">
<p class="six">Some other text</p>
</div>
</div>
</body>
給定一個選擇器，例如.five，我想從 DOM 中洗掉所有元素，同時保留.four > .five > .six. 換句話說，在洗掉所有元素后，我應該留下：
<body>
<div class="four">
<div class="five">
<p class="six">Some other text</p>
</div>
</div>
</body>
我想出了以下解決此問題的方法：
function removeElementsExcept(selector) {
let currentElement = document.querySelector(selector)
while (currentElement !== document.body) {
const parent = currentElement.parentNode
for (const element of parent.children) {
if (currentElement !== element) {
parent.removeChild(element)
}
}
currentElement = parent
}
}
這對于上述情況來說已經足夠好了，我為此創建了一個JSfiddle。
但是，當我嘗試在更復雜的網頁上運行它時，例如在https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild上呼叫諸如包含文本“注意：只要參考...”removeElementsExcept('#sect1')的藍色及其內部內容將保留在頁面上。div但是，如果您嘗試運行它，頁面上還會保留許多其他元素以及藍色div。
我在我的功能中做錯了什么？
uj5u.com熱心網友回復：
發生這種情況是因為您正在修改正在迭代的集合。您可以通過手動調整用于查看子項的索引來解決此問題。
function removeElementsExcept(selector) {
let currentElement = document.querySelector(selector)
while (currentElement !== document.body) {
const parent = currentElement.parentNode;
let idx = 0;
while (parent.children.length > 1) {
const element = parent.children[idx];
if (currentElement !== element) {
parent.removeChild(element)
} else {
idx = 1;
}
}
currentElement = parent
}
}
uj5u.com熱心網友回復：
parent.removeChild(element)更改迭代集合的長度，以便跳過元素。您可以使用[...parent.children]將其傳播HTMLCollection到一個陣列中，使其可以安全地洗掉。
另一種方法是通過遍歷目標元素的所有子節點和所有父節點來構建一組要保留的節點。然后洗掉不在集合中的所有其他節點。我沒有運行基準測驗。
const removeElementsExcept = el => {
const keptEls = new Set();
for (let currEl = el; currEl; currEl = currEl.parentNode) {
keptEls.add(currEl);
}
for (const childEl of [...el.querySelectorAll("*")]) {
keptEls.add(childEl);
}
for (const el of [...document.querySelectorAll("body *")]) {
if (!keptEls.has(el)) {
el.remove();
}
}
};
removeElementsExcept(document.querySelector(".five"));.four {
background: red;
height: 100px;
padding: 1em;
}
.five {
background: blue;
height: 100px;
padding: 1em;
}
.six {
background: yellow;
height: 100px;
padding: 1em;
}<div class="one">
<div class="two">
<p class="three">Some text</p>
</div>
</div>
<div class="four">
<div class="five">
<p class="six">Some other text</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459024.html
標籤：javascript html dom