[英]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.