Emulation of DOM.prototype in IE (lte 7)

As everyone knows, in our "expensive" IE versions below 8, there is no support for Element.prototype (as well as HTMLElement, Node).


To begin with, we simply create the Element function, and through the prototype we add the function we need:

Element = function () {};
Element.prototype.pSib = function () {
var node = this ;
while (node = node.previousSibling) {
if (node.nodeType != 3) return node;
}
return null ;
}

This function searches for previousSibling for an element, skipping text nodes!

Create a public method using behavior :

< PUBLIC:COMPONENT >
< PUBLIC:METHOD NAME ="pSib"
INTERNALNAME ="_pSib" />
< script type ="text/javascript" >
var el = new Element;
_pSib = el.pSib;
</ script >
</ PUBLIC:COMPONENT >

Save to test.htc and through the conditional comments, add to the browser:

<!--[if lte IE 7]>
<style type="text/css">
* { behavior: url(test.htc); }
</style>
<![endif]-->

')
Next, we extend the createElement , and assign those methods that we declared in the profiler to each element:

var __IEcreateElement = document .createElement;
document .createElement = function (tagName) {
var element = __IEcreateElement(tagName);
var interface = new Element;
for (method in interface )
element[method] = interface [method];
return element;
}

The source code will be as follows:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > IE.prototype </ title >
< meta http-equiv ="content-type" content ="text/html; charset=windows-1251" />

<!--[if lte IE 7]>
<script type="text/javascript">
Element = function () {};
var __IEcreateElement = document.createElement;
document.createElement = function (tagName) {
var element = __IEcreateElement(tagName);
var interface = new Element;
for (method in interface)
element[method] = interface[method];
return element;
}
</script>
<style type="text/css">
* { behavior: url(test.htc); }
</style>
<![endif]-->

<script type= "text/javascript" >
function addLoadEvent(func) {
var oldonload = window.onload;
if ( typeof window.onload != 'function' ) { window.onload = func;}
else {window.onload = function () { if (oldonload) {oldonload();}func();}}
}

Element.prototype.pSib = function () {
var node = this ;
while (node = node.previousSibling) {
if (node.nodeType != 3) return node;
}
return null ;
}

addLoadEvent( function () {
alert( document .getElementById( 'testinput' ).pSib().id);
});
</ script >
</ head >
< body >
< label for ="text" id ="testlabel" > Enter text </ label >
< input name ="text" type ="text" id ="testinput" >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .

addLoadEvent runs the code, after 100% of the page loads.

Do not forget that Element.prototype works fine in other browsers, because it does not need to be put into conditional comments;)

Watch a simple demo