[英]Is there anything wrong with adding an HTML element as a direct child of document.documentElement?
我正在编写一个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的子级。 另外，我感谢提供替代解决方案的所有答案，它们非常有用。 但是出于好奇，有人知道我目前在做什么吗？ 如果可以，为什么会起作用？
HTML文档结构的W3C规范说它由<head>和<body>元素组成，并且<body>包含要呈现的内容。 关于这两个元素之外的元素，没有任何说明。
如果它看起来可行，那可能只是实现的一次偶然事件-例如，许多实现都可以容忍HTML格式不正确的事情。
创建一个新的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);
潜在的解决方案：
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模态 。 如果使用data-backdrop="static"和data-keyboard="false"对其进行初始化，则不会通过单击外部或单击esc消失。 可以使用document.querySelector('.modal-backdrop')选择该元素。 将不透明度设置为1，将背景设置为白色或您要使用的任何美学效果。
是否始终定义document.documentElement并始终使用html元素？
[英]Is document.documentElement always defined and always the html element?
Chrome 58中对document.documentElement的'ontouchstart'是true
[英]'ontouchstart' on document.documentElement is true in Chrome 58
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.