javascript - 从 HTML 中删除选定元素的旧方法

Question

这是我自己的网站https://celestialbunny.github.io/frontend_02/我正在尝试做一些“转储”——通过纯 javascript 从页面中删除某些元素。

我试过:

let body = document.body
let navs = document.querySelectorAll('nav');
let headers = document.querySelectorAll('header');
let footers = document.querySelectorAll('footer');
let imgs = document.querySelectorAll('img');
let as = document.querySelectorAll('a');
let links = document.querySelectorAll('link');
let scripts = document.querySelectorAll('script');

body.remove(navs);
body.remove(headers);
body.remove(footers);
body.remove(imgs);
body.remove(as);
body.remove(links);
body.remove(scripts);

情况是这样的，就说我只做了:

1. let body = document.body;
2. let navs = document.querySelectorAll('nav');
3. body.remove(导航) 这将导致删除整个页面。

我曾尝试引用有关 https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove 的文档而且我似乎无法理解为什么从“body”中删除“child”会导致“空白页”

如何在不影响其余元素的情况下删除特定元素？

Answer 1

你的语法不对。你不需要 body 。

img 示例:

const imgs = document.querySelectorAll('img');
[...imgs].forEach(e => e.remove());

如果您使用 document.querySelectorAll() 选择 HTML 元素，您会得到一个 NodeList。 NodeList 类似于数组，但不能直接循环它。

要删除 NodeList 中的目标元素，您必须循环遍历 List。

使用 [...imgs] 或使用 Array.from(imgs) 将 NodeList 转换为数组。 现在您可以遍历数组并删除其成员。