J'écris une extension chrome, dont une partie des fonctionnalités m'oblige à masquer chaque élément html à certains moments, à l'exception d'un div que j'ai créé. (Je cache tout et ajoute le div au site Web actuel en javascript) Parce que le réglage de document.body.style.display = "none" ne permettra à aucun des enfants du corps d'être vu, je dois ajouter l'enfant que je veux être vu ailleurs. (J'ai également essayé d'utiliser style.visibility, mais pour une raison quelconque, cela ne cachait pas certains éléments / arrière-plans HTML sur certaines pages.) Ma solution consiste à ajouter le div à document.documentElement, en dehors de document.body. Ce correctif fonctionne parfaitement, mais semble étrange. Y a-t-il quelque chose de mal à ajouter un nouvel enfant aux éléments? Est-ce que je fais quelque chose de mal?
EDIT: Quelques réponses ont utilisé les enfants de document.body, donc j'ai pensé que je devrais noter que mon code doit s'exécuter à document_start, et bien que j'attende le chargement de document.body avant de l'exécuter, je ne peux pas attendre pour tous ses enfants à charger. Par conséquent, je ne peux pas utiliser / stocker les enfants de document.body. De plus, je suis reconnaissant pour toutes les réponses apportant des solutions alternatives, elles sont très utiles. Mais par curiosité, est-ce que quelqu'un sait s'il y a quelque chose qui cloche dans ce que je fais actuellement? Pourquoi ça marche, si oui?
4 Réponses :
Une solution potentielle:
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))
}
Le contenu du corps est maintenant bien ajusté à côté de votre div, que vous pouvez masquer / afficher tous les deux. Comme indiqué ci-dessous, j'ai complètement espacé que cela détruirait vos auditeurs. Si vous voulez conserver les écouteurs, essayez ce qui suit:
const body = document.querySelector('body');
body.innerHTML = `<div class="my-div"></div><div class="content">${body.innerHTML}</div>`;
Attachez celui qui convient à quel que soit votre événement. Cela préservera tous vos auditeurs. Si vous avez besoin d'une fonctionnalité, DocumentFragment a les méthodes querySelector () et querySelectorAll () .
Une autre méthode est la méthode modale, où vous avez juste un div qui couvre toute la page. Consultez les modaux Bootstrap , par exemple. Si vous l'initialisez avec data-backdrop = "static" et data-keyboard = "false" , il ne disparaîtra pas en cliquant à l'extérieur ou en appuyant sur esc . L'élément peut être sélectionné avec document.querySelector ('. Modal-backdrop') . Définissez l'opacité sur 1 et l'arrière-plan sur blanc ou selon l'esthétique souhaitée.
Cela perdra toutes les propriétés des éléments du corps, y compris des éléments tels que les écouteurs d'événements qui leur sont attachés.
C'est pourquoi vous n'attachez les auditeurs qu'au corps;) J'ai totalement oublié ça! J'ai mis à jour ma réponse pour refléter cela.
Malheureusement, je ne suis pas en mesure de supposer que les enfants de document.body ont été chargés au moment où je dois exécuter mon code, donc je ne peux pas utiliser la première partie, mais merci pour l'idée quand même. Je vais cependant examiner la méthode modale, cela peut fonctionner.
La spécification W3C de la structure de document HTML indique qu'elle consiste en des éléments et , et le contient le contenu qui doit être rendu. Rien n'est indiqué sur les éléments en dehors de ces deux éléments.
Si cela semble fonctionner, c'est probablement juste un accident de mise en œuvre - pour les cas, de nombreuses implémentations pardonnent des choses comme du HTML mal formé.
Si l'un des éléments était déjà masqué, vous devez en garder une trace afin de ne pas les afficher lorsque vous revenez.
Malheureusement, je ne suis pas en mesure de supposer que les enfants de document.body ont été chargés au moment où je dois exécuter mon code, donc je ne peux pas l'utiliser, mais merci pour la réponse
J'ai remplacé ma réponse par quelque chose qui tente de répondre à votre question principale.
DOM n'est pas HTML donc cette réponse n'est pas pertinente.
Créez un nouveau DIV pour contenir les enfants du corps et cachez-le.
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);
Malheureusement, je ne suis pas en mesure de supposer que les enfants de document.body ont été chargés au moment où je dois exécuter mon code, donc je ne peux pas l'utiliser, mais merci pour la réponse
Il est parfaitement possible d'ajouter des éléments ou des nœuds de texte directement à document.documentElement .
DOM n'est pas HTML, il a sa propre spécification, ce qui - étant un modèle objet - est naturellement assez permissif:
document.documentElement est un élément [ spec ]:
L'élément document d'un document est l ' élément dont le parent est ce document, s'il existe, et nul dans le cas contraire.
Les éléments sont autorisés à avoir ces enfants [ spec ]:
Zéro ou plusieurs nœuds dont chacun est Element, Text, ProcessingInstruction ou Comment.
Avez-vous vraiment besoin de conserver l'ancien
bodydans le DOM? Vous pourriez peut-être détacher savedocument.bodydans une variable, le remplacer par un nouveau corps, et le remettre plus tard lorsque vous voulez tout afficher à nouveau.J'y ai pensé mais mon code s'exécute dans un script de contenu au début du document et même si je vérifie que document.body existe, je ne veux pas avoir à attendre et à vérifier que tous ses enfants ont été chargés. Ainsi, si j'utilisais cette méthode, je crains que les enfants du corps ne soient pas chargés correctement avant d'exécuter le code et donc lorsque j'ai restauré le document.body, les nœuds qui n'avaient pas été chargés ne se chargeraient jamais.
Il est parfaitement sûr d'ajouter à documentElement car c'est DOM, pas HTML, et la spécification DOM ne se soucie pas de cela.