Explication détaillée des nouvelles fonctionnalités HTML5 Code Mutation Observer

1. Présentation

Mutation Observer est une interface qui surveille les modifications du DOM. Mutation Observer sera averti lorsque des modifications se produisent dans l'arborescence Objet DOM.

Conceptuellement, c'est très proche de l'événement. On peut comprendre que lorsque le DOM change, l'événement Mutation Observer sera déclenché. Cependant, il est fondamentalement différent des événements : les événements sont déclenchés de manière synchrone, ce qui signifie que lorsque le DOM change, l'événement correspondant sera déclenché immédiatement ; Mutation Observer est déclenché de manière asynchrone. Après le changement du DOM, il ne sera pas déclenché immédiatement, mais le sera. attendez que Déclenché une fois que toutes les opérations DOM en cours sont terminées.

Cette conception est destinée à faire face aux changements fréquents du DOM. Par exemple, si 1000 paragraphes (p éléments) sont insérés en continu dans le document, 1000 événements d'insertion seront déclenchés en continu, et la fonction de rappel de chaque événement sera exécutée, ce qui est susceptible d'amener le navigateur à freeze; The Mutation Observer est complètement différent. Il ne sera déclenché qu'une fois les 1000 paragraphes insérés, et il ne sera déclenché qu'une seule fois.

Remarque : vous pouvez voir le journal dans la console

Mutation Observer a les caractéristiques suivantes :

• Il attend que toutes les tâches de script soient terminées avant d'exécuter , c'est-à-dire que la méthode asynchrone

• est utilisée pour encapsuler l'enregistrement des modifications DOM dans un tableau pour le traitement au lieu de traiter les modifications DOM une par une.

• Il peut observer tous les changements qui se produisent dans le nœud DOM , ou il peut observer un certain type de changements

actuellement, Firefox(14+), Chrome(26+), Opera(15+), IE(11+) et Safari(6.1+) prennent en charge cette API. Lorsque Safari 6.0 et Chrome 18-25 utilisent cette API, vous devez ajouter le préfixe WebKit (WebKitMutationObserver). Vous pouvez utiliser l'expression suivante pour vérifier si le navigateur prend en charge cette API.

var MutationObserver = window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;var mutationObserverSupport = !!MutationObserver;

2. Méthode d'utilisation

Tout d'abord, utilisez le constructeur MutationObserver pour créer une nouvelle instance et spécifier la fonction de rappel de cette instance.

var observer = new MutationObserver(callback);

2.1 Méthode d'observation

La méthode d'observation spécifie l'élément DOM à observer et les changements spécifiques à observer.

var article = document.querySelector('article');
var options = {    
'childList': true,    
'arrtibutes': true};

observer.observer(article, options);

Le code ci-dessus précise d'abord que l'élément DOM à observer est nommé article, puis précise que les changements à observer sont des changements dans les éléments enfants et des changements dans les attributs . Enfin, transmettez ces deux qualifications en tant que paramètres dans la méthode observateur de l'objet observateur.

Les modifications DOM observées par MutationObserver (c'est-à-dire l'objet option dans le code ci-dessus) incluent les types suivants :

• childList : modifications dans les éléments enfants

• attributs : modifications des attributs

• characterData : modifications du contenu du nœud ou du texte du nœud

• sous-arbre : tous nœuds subordonnés (y compris les modifications dans les nœuds enfants et les nœuds enfants des nœuds enfants)

Quel type de changement vous souhaitez observer, spécifiez simplement sa valeur comme vraie dans l'objet option. Il convient de noter que les modifications de sous-arborescence ne peuvent pas être observées seules et qu'un ou plusieurs éléments parmi childList, attributs et CharacterData doivent être spécifiés en même temps.

En plus du type de modification, l'objet option peut également définir les attributs suivants :

• attributeOldValue : la valeur est vraie ou fausse. Si c'est vrai, cela signifie que la valeur de l'attribut avant la modification doit être enregistrée.

• characterDataOldValue : La valeur est vraie ou fausse. Si c'est vrai, cela signifie que la valeur des données avant le changement doit être enregistrée.

• attributesFilter : La valeur est un tableau, représentant les attributs spécifiques qui doivent être observés (tels que ['class', 'str']).

Méthode de déconnexion 2.2 et méthode takeRecord

La méthode de déconnexion est utilisée pour arrêter l'observation. Lorsque des modifications correspondantes se produisent, la fonction de rappel ne sera plus appelée.

observer.disconnect();

La méthode takeRecord est utilisée pour effacer l'enregistrement des modifications, c'est-à-dire qu'elle ne traitera plus les modifications non traitées.

observer.takeRecord

2.3 Objet MutationRecord

Chaque fois que l'objet DOM change, un enregistrement de modification sera généré. Cet enregistrement de modification correspond à un objet MutationRecord, qui contient toutes les informations liées à la modification. Un tableau composé d'objets de mutation traités par Mutation Observer.

L'objet MutationRecord contient des informations liées au DOM et possède les attributs suivants :

• type : type de changement observé (attribut, CharacterData ou ChildList).

• cible : l'objet DOM modifié.

• addedNodes : Nouveaux objets DOM.

• removeNodes : objets DOM supprimés.

• previousSibling:前一个同级的DOM对象，如果没有则返回null。

• nextSibling:下一个同级的DOM对象，如果没有就返回null。

• attributeName:发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

• oldValue:变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

3、实例

3.1 子元素的变动

下面的例子说明如果读取变动记录。

var callback = function(records) {
    records.map(function(record) {
        console.log('Mutation type: ' + record.type);
        console.log('Mutation target: ' + record.target);
    });
};var mo = new MutationObserver(callback);var option = {    
'childList': true,    'subtree': true};

mo.observer(document.body, option);

上面代码的观察器，观察body元素的所有下级元素（childList表示观察子元素，subtree表示观察子元素的下级元素）的变动。回调函数会在控制台显示所有变动的类型和目标元素。

3.2、属性的变动

下面的例子说明如何追踪属性的变动。

var callback = function(records) {
    records.map(function(record) {
        console.log('Previous attribute value: ' + record.oldValue);
    });
};
var mo = new MutationObserver(callback);
var element = document.getElementById('#my_element');
var option = {    
'attribute': true,    
'attributeOldValue': true};

mo.observer(element, option);

上面代码先设定追踪属性变动（'attributes': true），然后设定记录变动前的值。实际发生变动时，会将变动前的值显示在控制台。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!