DOM Core : Nœuds et position

Il y a quelques mois de cela, je travaillais sur mon script show-quote.js, et j’étais confronté à un problème insoluble : Il me fallait déterminer, à chaque fois que l’évènement mouseout était déclenché, si la cible de destination du curseur (Event.relatedTarget) se trouvait dans le bloc de citation, et si ce n’était pas le cas, masquer le bloc affichant le lien source de la citation (attribut cite de l’élément BLOCKQUOTE).

MSIE dispose de la méthode Element.contains() (non-standard) pour cela :

// Renvoie true si otherElt est un descendant de myElt, false sinon.
var result = myElt.contains(otherElt);

Je n’avais toutefois pas trouvé d’équivalent standard à l’époque et je m’étais rabattu sur une solution un peu barbare dans le cadre de mon script :

var result = ( citation.parentNode.parentNode == evt.relatedTarget );

Ignoble, n’est-ce pas ? J’ai enfin trouvé une méthode standard pour gérer cela : Node.compareDocumentPosition(). Elle a été ajoutée dans le DOM niveau 3. Cette méthode est utilisable sur tous types de nœud contrairement à la méthode Element.contains() et renvoit un bitmask du positionnement entre les deux nœuds. On peut ainsi savoir si l’un est descendant ou ancêtre de l’autre, lequel suit l’autre dans l’ordre logique du document, …

J’ai donc modifié mon script pour utiliser cette méthode (c’est beaucoup plus propre à mon goût) et créé une page d’ exemple d’utilisation de Node.compareDocumentPosition(). Enfin, pour ceux qui n’auraient pas de scrupules à simuler Element.contains() sur Mozilla (et donc utiliser du code propriétaire, même si derrière, c'est standard), voilà le morceau de code :

Element.prototype.contains = function(otherElt) {
    return (this.compareDocumentPosition(otherElt) & this.DOCUMENT_POSITION_CONTAINED_BY) ? true : false;
};

Ce bout de code rendra disponible une méthode Element.contains() sur tous les nœuds de type élément et au fonctionnement similaire à celle de l’API de Microsoft.