Comment puis-je déterminer si un élément DOM créé dynamiquement a été ajouté au DOM ?

Question

Selon les spécifications seulement le BODY et FRAMESET fournissent un événement "onload" auquel se rattacher, mais j'aimerais savoir quand un élément DOM créé dynamiquement a été ajouté au DOM en JavaScript.

Les heuristiques super-naïves que j'utilise actuellement, et qui fonctionnent, sont les suivantes :

• Traversez le parentNode de l'élément jusqu'à ce que je trouve l'ancêtre ultime (c'est-à-dire parentNode.parentNode.parentNode.etc. jusqu'à ce que parentNode soit nul).

• Si l'ancêtre ultime a une valeur définie, non nulle. corps propriété

  • supposer que l'élément en question fait partie du dom

• sinon

  • répéter ces étapes à nouveau dans 100 millisecondes

Ce que je recherche, c'est la confirmation que ce que je fais est suffisant (encore une fois, cela fonctionne à la fois dans IE7 et FF3) ou une meilleure solution que, pour une raison quelconque, j'ai complètement ignorée ; peut-être d'autres propriétés que je devrais vérifier, etc.

---

EDIT : Je veux une façon de faire qui soit compatible avec les navigateurs, je ne vis pas dans un monde à un seul navigateur, malheureusement ; cela dit, les informations spécifiques aux navigateurs sont appréciées, mais veuillez indiquer le navigateur que vous connaissez. fait travailler. Merci !

Answer 1

UPDATE : Pour ceux que cela intéresse, voici l'implémentation que j'ai finalement utilisée :

function isInDOMTree(node) {
   // If the farthest-back ancestor of our node has a "body"
   // property (that node would be the document itself), 
   // we assume it is in the page's DOM tree.
   return !!(findUltimateAncestor(node).body);
}
function findUltimateAncestor(node) {
   // Walk up the DOM tree until we are at the top (parentNode 
   // will return null at that point).
   // NOTE: this will return the same node that was passed in 
   // if it has no ancestors.
   var ancestor = node;
   while(ancestor.parentNode) {
      ancestor = ancestor.parentNode;
   }
   return ancestor;
}

La raison pour laquelle j'ai voulu cela est de fournir un moyen de synthétiser la onload pour les éléments du DOM. Voici cette fonction (bien que j'utilise quelque chose de légèrement différent car je l'utilise en conjonction avec la fonction MochiKit ) :

function executeOnLoad(node, func) {
   // This function will check, every tenth of a second, to see if 
   // our element is a part of the DOM tree - as soon as we know 
   // that it is, we execute the provided function.
   if(isInDOMTree(node)) {
      func();
   } else {
      setTimeout(function() { executeOnLoad(node, func); }, 100);
   }
}

À titre d'exemple, cette configuration pourrait être utilisée comme suit :

var mySpan = document.createElement("span");
mySpan.innerHTML = "Hello world!";
executeOnLoad(mySpan, function(node) { 
   alert('Added to DOM tree. ' + node.innerHTML);
});

// now, at some point later in code, this
// node would be appended to the document
document.body.appendChild(mySpan);

// sometime after this is executed, but no more than 100 ms after,
// the anonymous function I passed to executeOnLoad() would execute

J'espère que cela sera utile à quelqu'un.

REMARQUE : la raison pour laquelle j'ai opté pour cette solution plutôt que pour la solution Réponse de Darryl C'est parce que la technique getElementById ne fonctionne que si vous êtes dans le même document ; j'ai quelques iframes sur une page et les pages communiquent entre elles de manière complexe - quand j'ai essayé cela, le problème était qu'il ne pouvait pas trouver l'élément parce qu'il faisait partie d'un document différent du code dans lequel il était exécuté.

Answer 2

La réponse la plus simple est d'utiliser l'outil d'évaluation de la qualité de l'eau. Node.contains méthode prise en charge par Chrome, Firefox (Gecko), Internet Explorer, Opera et Safari. Voici un exemple :

var el = document.createElement("div");
console.log(document.body.contains(el)); // false
document.body.appendChild(el);
console.log(document.body.contains(el)); // true
document.body.removeChild(el);
console.log(document.body.contains(el)); // false

Idéalement, nous utiliserions document.contains(el) mais cela ne fonctionne pas dans IE, nous utilisons donc document.body.contains(el) .

Malheureusement, il faut encore interroger, mais vérifier si un élément se trouve déjà dans le document est très simple :

setTimeout(function test() {
  if (document.body.contains(node)) {
    func();
  } else {
    setTimeout(test, 50);
  }
}, 50);

Si l'ajout d'un peu de CSS à votre page ne vous pose pas de problème, voici une autre technique astucieuse qui utilise des animations pour détecter les insertions de nœuds : http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Answer 3

Ne pouvez-vous pas faire un document.getElementById('newElementId'); et voir si cela retourne vrai. Si ce n'est pas le cas, comme vous le dites, attendez 100 ms et réessayez ?

Answer 4

Vous pourriez demander document.getElementsByTagName("*").length ou créer une fonction appendChild personnalisée comme la suivante :

var append = function(parent, child, onAppend) {
  parent.appendChild(child);
  if (onAppend) onAppend(child);
}

//inserts a div into body and adds the class "created" upon insertion
append(document.body, document.createElement("div"), function(el) {
  el.className = "created";
});

Mise à jour

Sur demande, ajouter les informations de mes commentaires dans mon billet

Il y avait un commentaire de John Resig sur la bibliothèque Peppy sur Ajaxian aujourd'hui qui semblait suggérer que sa bibliothèque Sizzle pourrait être capable de gérer les événements d'insertion DOM. Je suis curieux de voir s'il y aura du code pour gérer IE également.

En suivant l'idée de polling, j'ai lu que certaines propriétés d'éléments ne sont pas disponibles tant que l'élément n'a pas été ajouté au document (par exemple element.scrollTop), peut-être que vous pourriez polluer cela au lieu de faire tout le DOM traversal.

Une dernière chose : dans IE, une approche qui pourrait être intéressante à explorer est de jouer avec l'événement onpropertychange. Je pense que l'ajout d'un élément au document va déclencher cet événement pour au moins une propriété.

Answer 5

Dans un monde parfait, vous pourriez accrocher les événements de mutation. Je doute qu'ils fonctionnent de manière fiable, même sur les navigateurs standards. Il semble que vous ayez déjà implémenté un événement de mutation. Vous pourriez donc ajouter cette fonctionnalité afin d'utiliser un événement de mutation natif plutôt qu'un sondage de dépassement de délai sur les navigateurs qui les prennent en charge.

J'ai vu des implémentations de DOM-change qui surveillent les changements en comparant document.body.innerHTML à la dernière sauvegarde .innerHTML ce qui n'est pas très élégant (mais fonctionne). Puisque vous allez finalement vérifier si un nœud spécifique a déjà été ajouté, il est préférable de vérifier cela à chaque interruption.

Les améliorations auxquelles je pense sont en utilisant .offsetParent plutôt que .parentNode car cela va probablement couper quelques parents de votre boucle (voir les commentaires). Ou en utilisant compareDocumentIndex() sur tout sauf IE et les tests .sourceIndex propery pour IE (devrait être -1 si le noeud n'est pas dans le DOM).

Cela pourrait aussi aider : Implémentation du navigateur X compareDocumentIndex par John Resig .