Extension DOM du modèle d'objet de document JavaScript

Selon les exigences du W3C pour le DOM, les navigateurs peuvent y ajouter eux-mêmes des propriétés et des méthodes pour améliorer ses fonctionnalités. Certaines des nouvelles fonctionnalités sont destinées à la compatibilité ascendante, tandis que d'autres sont ajoutées en fonction des commentaires des développeurs sur les problèmes courants.

Mode présentation

À partir d'IE6, le navigateur IE fait la distinction entre le mode standard et le mode mixte, ce qui nous oblige à distinguer dans quel mode se trouve le navigateur lors de son utilisation. IE ajoute un attribut appelé compatMode à l'objet document. La seule tâche de cet attribut est d'identifier le mode dans lequel se trouve le navigateur. Par exemple, dans l'exemple suivant, s'il s'agit d'un mode standard, la valeur de document.compatMode est égale à « CSS1Compat » ; s'il s'agit d'un mode mixte, la valeur de document.compatMode est égale à « BackCompat ».

if(document.compatMode == "CSS1Compat"){
    alert("标准模式");
}else{
    alert("混杂模式");
}

Après IE, les navigateurs Firefox, Chrome et Opera ont également implémenté cet attribut. Le navigateur Safari implémente la propriété document.compatMode à partir de la version 3.1.

Plus tard, IE8 a introduit un nouvel attribut appelé documentMode pour l'objet document. Son utilisation est indiquée ci-dessous.

if(document.compatMode > 7){
    alert("IE8+ 标准模式");
}

En effet, IE8 dispose de 3 modes de rendu différents, et cet attribut est introduit précisément pour distinguer ces modes. Si la valeur de cet attribut est 5, il indique le mode mixte (c'est-à-dire le mode IE5), si la valeur est 7, il indique le mode d'émulation IE7, et s'il est 8, il indique le mode standard IE8.

Méthode contain()

Lors de l'utilisation du DOM, nous devons souvent déterminer si un nœud donné est un nœud descendant d'un autre nœud. Le navigateur IE a d'abord introduit une méthode contain(), qui peut obtenir ces informations sans parcourir l'intégralité de l'arborescence DOM. La méthode contain() doit être appelée sur le nœud ancêtre comme point de départ de la recherche. La méthode reçoit un paramètre, qui est le nœud descendant à détecter. Si le nœud transmis est un descendant du nœud actuel, il renverra vrai, sinon il renverra faux. Par exemple,

alert(document.documentElement.contains(document.body));   //true

L'exemple ci-dessus teste si l'élément est un descendant de l'élément

Les navigateurs IE, Safari3, Opera8 et Chrome prennent tous en charge la méthode contain().

Le navigateur Firefox ne supporte pas la méthode contain(), mais Firefox implémente une méthode alternative au niveau DOM3 : la méthode compareDocumentPosition(). (Le navigateur Opera9.5 prend également en charge cette méthode). Cette méthode est utilisée pour déterminer la relation entre deux nœuds et renvoie un masque de bits (bitmark) représentant la relation. Les valeurs de ce masque de bits sont répertoriées dans le tableau suivant.

Si vous devez imiter la méthode contain(), alors vous devez faire attention au masque 16. Vous pouvez effectuer une opération ET au niveau du bit sur les résultats de la méthode compareDocumentPosition() pour déterminer si le nœud de référence (le nœud actuel sur lequel la méthode compareDocumentPosition() a été appelée) contient le nœud donné (le nœud passé en argument). Par exemple, l'exemple suivant :

var result = document.documentElement.compareDocumentPosition(document.body);
console.info("result="+result);
console.info("按位与操作后的布尔值结果为："+!!(result & 16));

Après avoir exécuté la méthode compareDocumentPosition(), le code ci-dessus obtient un résultat de 20, ce qui signifie "en arrière" 4 et " derrière" Contient" 16. Ensuite, une opération ET au niveau du bit sur le masque 16 renvoie une valeur non nulle. Les deux opérateurs logiques NOT convertissent les valeurs numériques en types booléens.

Nous pouvons écrire une fonction générale contain() via la détection des capacités du navigateur.

/*********************************************************/
/* 浏览器通用contains()方法
/* 参数：refNode - 参考节点 */
/* 参数：otherNode - 要检测的节点 */
/* 返回值： refNode包含otherNode是返回true，否则返回false*/
/*********************************************************/
function contains(refNode,otherNode){
    if(typeof refNode.contains == "function"){
        return refNode.contains(otherNode);
    }else if(typeof refNode.compareDocumentPosition == "function"){
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node = otherNode.parentNode;
        do{
            if (node === refNode) {
                return true;
            }else{
                node = node.parentNode;
            }
        }while(node !== null);
        return false;
    }
}

Cette fonction générale contain() utilise 3 méthodes pour déterminer si un nœud est un nœud descendant d'un autre nœud. Le premier paramètre de la fonction est le nœud de référence et le deuxième paramètre est le nœud à détecter.

Dans le corps de la fonction, vérifiez d'abord si la méthode contain() existe dans refNode, puis vérifiez s'il existe une méthode compareDocumentPosition(). La dernière étape de la fonction consiste à parcourir l'arborescence DOM vers le haut à partir de. otherNode, obtenez récursivement le parentNode et vérifiez s'il est égal à refNode. En haut de l'arborescence du document, la valeur de parentNode est égale à null et la boucle se termine.

Ce qui précède est le contenu de l'extension JavaScript Document Object Model-DOM. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !