Comment un nœud DIV peut-il être «détaché» et à quoi sert-il?

Je ne sais pas quelle réponse vous attendez, alors voici quelques reflections:

Je pensais que DOM possédait tous les nœuds.

Le document possède chaque noeud. Chaque nœud a une ownerDocument ^[MDN] .

De la spécification :

L’interface Document représente l’intégralité du document HTML ou XML. Conceptuellement, il s’agit de la racine de l’arborescence du document et fournit le principal access aux données du document.

Etant donné que les éléments, les nœuds de texte, les commentaires, les instructions de traitement, etc. ne peuvent pas exister en dehors du contexte d’un Document , l’interface de Document contient également les méthodes d’usine nécessaires à la création de ces objects. Les objects Node créés ont un atsortingbut ownerDocument qui les associe au Document dans le contexte duquel ils ont été créés.

Comment vous attacheriez-vous à DOM alors?

Il existe différentes manières d’insérer un nouveau nœud, telles que appendChild ^[docs] ou insertBefore ^[docs] .

Dernier point mais non le moindre, quel serait le but d’avoir un nœud détaché?

L’un des avantages est que vous pouvez créer des sous-arbres complexes hors connexion, de sorte que le navigateur ne soit pas obligé de recalculer la présentation à chaque fois que vous insérez un nœud.

Parfois, il est également utile pour parsingr une chaîne HTML. En créant un div détaché vide et en affectant la chaîne HTML à innerHTML , vous pouvez parsingr et traiter facilement la chaîne HTML.

Le seul inconvénient est que document.getElementById ne peut pas trouver de nœuds qui ne font pas partie de l’arborescence.

L’explication de la propriété Node.parentNode également intéressante à cet égard. Après tout, un Node qui n’a pas de parent ne fait pas partie de l’arbre:

Le parent de ce noeud. Tous les nœuds, à l’exception de Attr , Document , DocumentFragment , Entity et Notation peuvent avoir un parent. Toutefois, si un nœud vient d’être créé et n’a pas encore été ajouté à l’arborescence, ou s’il a été supprimé de l’arborescence, la valeur est null .

avec document.createElement() , vous pouvez créer un nœud d’élément

 var p = document.createElement("p"); 

À ce stade cependant, il existera en mémoire mais n’aura pas été attaché au DOM.

Un noeud peut être attaché au DOM de nombreuses façons, mais le plus simple serait probablement d’utiliser element.appendChild(node)

 var p = document.createElement("p"); // attach the newly created node to the document body document.body.appendChild(p); 

Vous voudrez peut-être d’abord créer l’élément, le manipuler puis l’attacher au DOM afin que vos manipulations ne provoquent pas de refoulement du navigateur, par exemple si vous définissez la couleur d’arrière-plan, la bordure, l’ajout d’éléments enfants, etc. mémoire sans que chaque changement doive être reflété comme un changement visuel dans le navigateur.

La modification du DOM coûte cher. Vous pouvez créer un object détaché, le configurer comme vous le souhaitez (en ajoutant ses atsortingbuts, les gestionnaires d’événements de liaison , etc.). Après avoir configuré comme vous le souhaitez, ajoutez-le au DOM.

Vous pouvez certainement créer des éléments qui ne font pas partie du DOM.

 var someElement = document.createElement("div"); var someOtherElement = $("
"); 

Effectuer des opérations sur des éléments détachés est bien plus efficace que sur des éléments attachés, car il n’est pas nécessaire de restituer les éléments détachés.

La page que vous avez liée utilise .empty() qui détache des éléments du DOM et supprime tous les gestionnaires d’événements de ces éléments.

Il y a aussi .detach() , qui peut être ce que vous voulez dire. .detach() fondamentalement juste, eh bien, détache le nœud du DOM. Cela ne fait plus partie du DOM; c’est juste en mémoire (tant que vous le gardez dans une variable). Cela signifie que si vous supprimez la variable, vous perdez définitivement le nœud détaché (ce n’est pas dans le DOM ni dans une variable).

Par exemple, un cas d’utilisation consiste à “supprimer” temporairement un élément du DOM sans le supprimer, afin que vous puissiez le joindre ultérieurement (à l’aide de .append / .after / etc).

 var detached = $("...").detach(); // later: $("body").append(detached);