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

Question

我不太熟悉 Javascript，更不了解 Javascript 在 Chrome 的 F12 开发者工具中的工作原理。我想做的是有一个最喜欢的，当点击它时，它会加载一个网页，但会删除加载的页面的一些混乱（我真的不在乎它是否在加载页面之前删除它，或加载它然后删除它）

现在，我正在尝试找出如何删除除我想要保留的元素（及其子元素）之外的所有元素，即具有以下 html 的元素：

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

我正在尝试以下操作（从我可以找到的内容来看），但我找不到正确的选择器（或者我做错了其他事情，不太确定）：

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:伪协议并遵循 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。）