javascript - 从网站中删除除 X 之外的所有元素

Question

我不太熟悉 Javascript，更不了解 Javascript 在 Chrome 的 F12 开发者工具中的工作原理。我想要做的是有一个收藏夹，当点击它时，它会加载一个网页但会删除加载页面的一些困惑(我真的不在乎它是否在页面加载之前删除它，或加载它然后删除它)

现在，我想弄清楚如何删除除我想保留的元素(及其子元素)之外的所有元素，即具有以下 html 的元素:

<div>
   <ul class="c-list-news u-relative" data-load-more-content>...</ul>
</div>

我正在尝试以下操作(根据我在 SO 上可以找到的内容)，但找不到正确的选择器(或者我做错了其他事情，不太确定):

var elem = document.querySelectorAll('body *:not(div ul.c-list-news, div ul.c-list-news *)');

for(var i=0;i<elem.length;i++) {
    elem[i].parentElement.removeChild(elem[i]); 
}

(PS:我还没有研究如何将它放入收藏夹/扩展中，稍后会介绍)

Answer 1

这可能比您意识到的要容易。 :-) 你可以像这样获取匹配 .c-list-news 的第一个元素:

const cListNews = document.querySelector(".c-list-news");

如果你想保留它的父级，只需添加 .parentNode 到:

const divContainer = document.querySelector(".c-list-news").parentNode;

然后，完全删除 body:

document.body.innerHTML = "";

...然后把元素放回去:

document.body.appendChild(cListNews); // Or `divContainer`

不过，我不确定我是否希望该页面继续保持可读性，因为这当然会完全改变元素在 DOM 中的位置，这很可能会导致 CSS 失败。

您不能制作一个既能加载页面又能一次性完成的书签(收藏夹)，因为 javascript: 书签在当前页面的上下文中工作。您可以使用 TamperMonkey 之类的扩展程序，它可以让您在转到匹配的 URL 时自动运行脚本。

但是您可以创建一个书签，当您已经在页面上时就可以使用它:只需使用javascript: 伪协议(protocol)并在它后面加上JavaScript 代码。例如:

javascript:var divContainer %3D document.querySelector(".c-list-news").parentNode%3Bdocument.body.innerHTML %3D ""%3Bdocument.body.appendChild(divContainer)%3Bconsole.log("done")%3B

我创建它的方法是简单地从代码中删除换行符(可选)，通过 encodeURIComponent 运行代码，并将 javascript: 放在前面。 (有些人还会将空格转换为 %20。)