web-dev-qa-db-fra.com

Alternative à DOMNodeInserted

DOMNodeInserted est connu pour ralentir les pages dynamiques, MDN recommande même de ne pas l'utiliser complètement, mais ne fournit aucune alternative.

L'élément inséré ne m'intéresse pas, j'ai juste besoin de savoir quand un script modifie le DOM. Existe-t-il une meilleure alternative aux écouteurs d'événements de mutation (peut-être getElementsByTagName dans un nsiTimer)?

javascriptdomfirefox-addondhtmlmutation-events
28
Fábio

Si vous créez une application Web qui cible les téléphones mobiles récents et les nouvelles versions de navigateurs (Firefox 5+, Chrome 4+, Safari 4+, iOS Safari 3+, Android 2.1+), vous pouvez utiliser le code suivant pour créer événement pour l'insertion de nœuds dom, et il s'exécute même sur les nœuds faisant initialement partie du balisage statique de la page!

Voici le lien vers le post complet avec et exemple: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Note sur les observateurs de mutations: Bien que les nouvelles fonctionnalités des observateurs de mutations des navigateurs récents permettent de surveiller les insertions simples et les modifications apportées au DOM, comprenez bien que cette méthode peut être utilisée beaucoup plus, car elle vous permet de surveiller pour toute correspondance de règle CSS dont vous pouvez parler. C’est super puissant pour de nombreux cas d’utilisation, aussi j’ai résumé cela dans une bibliothèque: https://github.com/csuwildcat/SelectorListener

Vous devez ajouter les préfixes appropriés au nom de l'événement CSS et animationstart si vous souhaitez cibler différents navigateurs. Vous pouvez en savoir plus à ce sujet dans l'article lié à ci-dessus.

Le cas d'insertion de noeud de base

CSS:

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

div.some-control {
    animation-duration: 0.01s;
    animation-name: nodeInserted;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'nodeInserted'){
        // Do something here
    }
}, true);

Écoute des sélections plus complexes:

Cela permet des choses presque impossibles à faire avec les observateurs de mutations

CSS:

@keyframes adjacentFocusSequence {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

.one + .two + .three:focus {
    animation-duration: 0.01s;
    animation-name: adjacentFocusSequence;
}

JavaScript:

document.addEventListener('animationstart', function(event){
    if (event.animationName == 'adjacentFocusSequence'){
        // Do something here when '.one + .two + .three' are 
        // adjacent siblings AND node '.three' is focused
    }
}, true);
41
csuwldcat

Une nouvelle alternative que @naugtur a brièvement mentionnée est MutationObserver . Il est conçu pour remplacer les événements de mutation déconseillés si le ou les navigateurs pour lesquels vous développez le prend en charge (comme si vous développiez une extension de navigateur).

10
Mike Henry

La même technique que celle décrite par csuwldcat a été transformée en un plugin jQuery facile à utiliser (si c'est votre cas): https://github.com/liamdanger/jQuery.DOMNodeAppear

0
Arktype