Javascript如何将所有类列表附加到innerHTML，然后将其应用于网页

Question

我想删除页面中除了我想要的元素之外的所有元素。我正在使用铬检查元件控制台。

所以我想到了这个方法：

document.body.innerHTML=texts.innerHTML；

我尝试了下面的代码，但它只将文本的第一个元素附加到body.innerHTML.

var texts = document.getElementsByClassName('HoXoMd D1wxyf G4EHhc');
for(let text of texts){
document.body.innerHTML = text.innerHTML;
}

我尝试了下面的代码，它会进行附加，但没有更改网站，它只在你打印时在控制台上进行附加：

var texts = document.getElementsByClassName('HoXoMd D1wxyf G4EHhc');
for(let text of texts){
document.body.innerHTML += text.innerHTML;
}

感谢，我是javascript新手

Answer 1

innerHTML很少是修改现有文档的好工具。此外，在迭代实时集合期间修改文档可能会产生意外的结果。

您可以收集除所需元素之外的所有元素，然后从文档中删除它们，如下所示：

const texts = document.body.querySelectorAll('*:not(.HoXoMd.D1wxyf.G4EHhc)');
for (let text of texts) {
text.remove();
}

<p>Paragraph 1</p>
<p class="HoXoMd D1wxyf G4EHhc">Remains 1</p>
<p class="HoXoMd D1wxyf G4EHhc">Remains 2</p>
<p class="HoXoMd D1wxyf G4EHhc">Remains 3</p>
<p class="HoXoMd">Paragraph 2</p>

通用*选择器收集document.body、:not伪类中的所有元素，排除与传递给:not的选择器匹配的元素。NodeListelement.querySelectorAll返回的是静态的，您可以删除循环中的元素，而不会导致活动列表造成混乱。

值得注意的是，使用element.querySelectorAll至关重要，如果使用document.querySelectorAll，文档中的所有元素都将被删除，包括head和body，并且页面上不会留下任何内容。

Answer 2

您的第二个代码片段很好，您只缺少一件事：您必须在选择要保留的元素后清除所有html，然后重新开始将它们添加到DOM中。

// use querySelectorAll instead
var texts = document.querySelectorAll('.keep'); 
// clear all html
document.body.innerHTML = ''; // <- 
// add all the html you want back to the dom
for (const text of texts) 
document.body.appendChild(text)

<div class="keep">keep this</div>
<div>don't care about this</div>
<div>don't care about this</div>
<div class="keep">keep this too</div>
<div>don't care about this</div>
<div class="keep">keep this also</div>

你可以用你想要的任何类来更改CCD_ 11。