Question

我正在编写一个chrome扩展程序，其功能的一部分要求我有时隐藏每个html元素，但已创建的一个div除外。（我将所有内容都隐藏起来，并使用javascript将div添加到当前网站中）由于设置document.body.style.display =“ none”将不允许显示身体的任何子代，因此我需要添加要添加的子代在其他地方看到。（我也尝试过使用style.visibility，但由于某些原因未在某些页面上隐藏某些HTML元素/背景。）我的解决方法是将div添加到document.documentElement之外的document.body之外。此修复程序实际上运行完美，但似乎很奇怪。在元素中添加新的孩子有什么问题吗？难道我做错了什么？

编辑：一些答案使用了document.body的子级，因此我想我应该注意我的代码必须在document_start上运行，尽管我在执行之前等待document.body加载，但我等不及了供其所有子级加载。因此，我不能使用/存储document.body的子级。另外，我感谢提供替代解决方案的所有答案，它们非常有用。但是出于好奇，有人知道我目前在做什么吗？如果可以，为什么会起作用？

Answer 1

{3}的W3C规范说它由<head>和<body>元素组成，并且<body>包含了要呈现的内容。关于这两个元素之外的元素，没有任何说明。

如果它看起来可行，那可能只是实现的一次偶然事件-例如，许多实现都会容忍HTML格式不正确的事情。

Answer 2

将元素或文本节点直接附加到document.documentElement完全没问题。
DOM不是HTML，它有自己的规范，它是 Object Model -自然是允许的：

document.documentElement是元素[spec]：

文档的document元素是 element ，其父文档是该文档（如果存在），否则为null。
允许元素具有这些子元素[spec]：

零个或多个节点，每个节点都是元素，文本，ProcessingInstruction或注释。

Answer 3

创建一个新的DIV来容纳身体的孩子，并将其隐藏。

var saveDiv = document.createElement("DIV");
saveDiv.id = "saveDiv";
saveDiv.style.display = "none";
Array.from(document.body.children).forEach(el => saveDiv.appendChild(el));
document.body.appendChild(saveDiv);

Answer 4

可能的解决方案：

const body = document.querySelector('body');
body.innerHTML = `<div class="my-div"></div><div class="content">${body.innerHTML}</div>`;

现在，所有内容都紧贴div，您可以同时隐藏/显示这两个内容。正如下面所指出的，我完全断定这将破坏您的听众。如果要保留侦听器，请尝试以下操作：

const body = document.querySelector('body');
const fragment = document.createDocumentFragment();
const hideBody = () => {
  for (let el of [...body.children]) (fragment.append(el))
}
const showBody = () => {
  for (let el of [...fragment.children]) (body.append(el))
}

为您的活动添加适当的内容。这将保留您的所有听众。如果您需要任何功能，DocumentFragment可以使用querySelector()和querySelectorAll()方法。

另一种方法是模态方法，其中只有一个div可以覆盖整个页面。例如，签出Bootstrap modals。如果您使用data-backdrop="static"和data-keyboard="false"对其进行初始化，则单击外部或单击 esc 不会消失。可以使用document.querySelector('.modal-backdrop')选择该元素。将不透明度设置为1，将背景设置为白色或您要使用的任何美感。

将HTML元素添加为document.documentElement的直接子代有什么问题吗？

4 个答案: