0

Since the Firefox [Bug 633133] of the in operator on DOM Collections has ben finally fixed - We can now write a short fast and clean function of the method "Contains" for FirefoX to check if x.contains(y). And vice- versa.

What we will need is:
a prototype
and we'll chose to use the:

var pro = window.HTMLElement.prototype

that :') will overwrite the native method existing in other gen-V browsers also.

But first (as a bonus) we will write a descendants method so we can chain them and use les code for more productivity:

oElement.descendants( [filter] )

pro.descendants = function(x){
	x = this.getElementsByTagName(x?x:"*")
	return x.length?x:null;
	}

and now we will write the (dependent to descendants) contains method:

oElement.contains( targetElement,[optFilter] )

pro.contains=function(x,y){
	return this.descendants(y)[x.id]
	}

And this is it! Now you have both oElement.descendants([tagsFilter]) and the practical oElement.contains(targetElement, [tagsFilter]).

The [tagsFilter ] is completely optional but is available for further optimization of your code, even though this code is as fast as native - further optimization does no harm . On contrary using it in this manner:

oElement.contains(targetElement,  "SPAN")

makes it even faster .

--------------------------------------------------

PS.:
The only drawback of this short dimple and fast code method is that it can't be used against anonymous elements, or to be exact elements with no ID. Although 99.9% of all times - nobody uses it in blind tests ever (targeting anonymous elements under click or some other mouse event and extracting the argument through event.target/srcelement or similar). But we can afford to add few more letters of code and make it possible.

pro.
contains=function(x,y){
	x.id?'':x.id='_id'
	return this.descendants(y)[x.id]
	}

Attention: this method assigns an id: '_id' to the tested 'this' ( no-id element).

But if that poses a problem for us, we can remove it as soon as we are done with it.

pro.
contains=function(x,y){
	x.id?'':x.id='_id';
	x = this.descendants(y)[x.id];
	x.id=='_id'?x.id='':0;
	return x
	}

if(x.contains(y)) //evaluates true/false;
But also returns the element object, therefore you are able to write something like this: x.contains(y).style...some property

[...]

1
Contributor
1
Reply
3
Views
6 Years
Discussion Span
Last Post by Troy III
0

Ups! :p
I've posted the one I've written [later] to be compatible with FX 633133 bug.
Here is the original idea using (one of the most powerful tinny features of JavaScript) - the IN Operator:

pro.contains=
function(x){return x.id in this.all}

Now that's the only reason I mention the 'in' op., in my 'overture' to this thread ...

At first I was blaming the "all" method, until I noticed that it was the aforementioned "in" operator bug on FX that was causing the failure -but as I already noted it's finally fixed.

*please use: <!DOCTYPE native> to include Firefox in authentic no-restrictions HTML mode.
(otherwise the "all" collection method will not be recognized)
----------------------------
Please note: earlier versions of IE do not support prototyping on elements.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.