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

【问题标题】：Remove all elements from website except X从网站中删除除 X 之外的所有元素
【发布时间】：2023-03-09 07:38:01
【问题描述】：

我不太熟悉 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：我还没有研究如何将它放入收藏夹/扩展中，稍后会出现）

【问题讨论】：

标签： javascript google-chrome css-selectors

【解决方案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。）

【讨论】：

它实际上完全符合我的要求，谢谢！我去看看 TamperMonkey，谢谢。
@FrançoisM。看起来您已经删除了第二条评论，但是是的，一旦您已经在网页上，您就可以为此使用书签。（这通常称为“bookmarklet”，是“bookmark”和“applet”的组合。）我在答案中添加了一个。 :-)
谢谢！是的，我删除了我的评论，因为我尝试在您的 4 行原始代码前添加 javascript: 并且效果很好。 encodedURIComponent的兴趣是什么？
@FrançoisM。 - 从技术上讲，下面的内容应该是 URI 编码的，因此如果没有 URI 编码，代码可能无法工作。使用上面的代码并不重要。（顺便说一句，你不需要全部四个，前两个是彼此的替代品。）

【解决方案2】：

将要保存的元素保存到变量中。从主体中删除所有节点，或您想要的元素，并添加要保留的元素。示例：

let elementToKeep = document.getElementById('side');
const myNode = document.getElementsByTagName("body")[0];
while (myNode.firstChild) {
  myNode.removeChild(myNode.firstChild);
}
myNode.appendChild(elementToKeep);

使用 removeChild 方法比将 innerHtml 设置为空字符串更快。在这里查看：Remove all child elements of a DOM node in JavaScript

【讨论】：