I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

contains() for Mozilla

One of my minor irritations with Mozilla is that it doesn't support a few DOM methods and properties that, though not officially a part of the spec, are nonetheless extremely useful and supported by all other browsers. I'm especially thinking of the contains() method and the children[] nodeList. While going through the more abstruse parts of the Level 3 Core spec today I found a way to add contains() to Mozilla.

The contains() method comes in handily in all kinds of situations. Its syntax is as follows:

<div id="writeroot">
<form>
<input id="test" />
</form>
</div>

var x = document.getElementById('writeroot');
var y = document.getElementById('test');
alert(x.contains(y));
alert(y.contains(x));

Since node x contains node y, the first alert shows true and the second one false. Very useful, if Mozilla only supported it.

Today I went through the Level 3 Core specification and found the compareDocumentPosition() method. This method works in roughly the same way as contains(), except that it generally compares the positions of two nodes and returns a bitmask:

• 1: Position disconnected
• 2: Precedes
• 4: Follows
• 8: Contains
• 16: Is contained by

Let's repeat the previous example:

<div id="writeroot">
<form>
<input id="test" />
</form>
</div>

var x = document.getElementById('writeroot');
var y = document.getElementById('test');
alert(x.compareDocumentPosition(y));
alert(y.compareDocumentPosition(x));

The alerts now return 20 and 10, respectively. y is contained by and follows x, so the first alert says 16 + 4 = 20. x contains and precedes y, so the second alert says 8 + 2 = 10.

Using this method I can now finally add a neat contains() method to the Node prototype if it's not there:

if (window.Node && Node.prototype && !Node.prototype.contains)
{
	Node.prototype.contains = function (arg) {
		return !!(this.compareDocumentPosition(arg) & 16)
	}
}

First I check if the Node prototype is supported. It isn't in IE, so this check is necessary to avoid errors in the next expressions. Then I check if its prototype is exposed (it isn't in Safari 1.3.2). If the browser survives this check, too, and the prototype doesn't already contain a contains() method, I define one.

The custom contains() compares the document positions of this (the node I use it on) and arg (the node I want to compare it to). If arg is contained by this, compareDocumentPosition returns a bitmask that includes 16. I do a bitwise AND 16 (& 16) which returns 16 or 0, and I convert this result to a boolean by doing !! (NOT NOT). The function returns this boolean.

Easy and elegant, and it's the first practical example of bitwise AND in JavaScript I ever found.

(BTW: I love bitmasks. I invented them for myself in my Commodore 64 days, and although later it turned out that this idea was not exactly new, I've always remembered them fondly, and am slightly disappointed that they have no role in modern JavaScript development.)

Comments

Comments are closed.