Extending HTML Elements

Code on this page only works in non-IE browsers. (Tested in Firefox 2.0 and Safari 3.0) The following pages show code for IE only and cross browser techniques.

Introduction

In Firefox, Safari, and other non-IE browsers, the method to extend HTML element constructors is the same as extending core JavaScript object constructors. The browser makes the constructor available; all that you need is to know the constructor name (see table below).

Hide Show Coordinates

  Extending the Element Object

To demonstrate the technique, three methods are added to the Element constructor: show, hide, and getCoordinates. The behaviors of the first two are obvious. The third, I needed for a specific drag and drop project. It returns the upper-left and lower-right page coordinates for the element. It made determining the element the dragged object was over when the mouse button was released much easier. You just ask the candidate elements their coordinates.

if (window.Element) {
    Element.prototype.show = function() {
		this.style.visibility = "visible";
    };
    Element.prototype.hide = function() {
        this.style.visibility = "hidden";
    };
    Element.prototype.getCoordinates = function() {
        /* This gets coordinates within the offset parent object.
         * The correct method to get page coordinates is 
         * more complex.
        */
        var xy = {};
        xy.x1 = this.offsetLeft;
        xy.y1 = this.offsetTop;
        xy.x2 = this.offsetLeft + this.offsetWidth;
        xy.y2 = this.offsetTop + this.offsetHeight;
        return xy;
    };
}

In Firefox, Safari, et al, all HTML elements are represented in JavaScript as and instance of the Element or HTMLElement object. When methods are added to the Element object's prototype property, they are inheritable methods each instance receives. The key word this within the methods refers to each object instance.

• The first line of the code above determines if the constructor is available. The constructors are global or, more correctly, members of the global object, window.
• The rest of the code adds the methods to the prototype property of the constructor Element.

  Extending Specific Element Types

The previous section stated that all HTML elements are represented by an instance of the Element object. Element is an ancestor "class" to the object constructor that is used. They are represented by an instance of a descendant of the Element constructor.

The object hierarchy is Object => Node => Element => HTMLElement and then a specific class of HTML element. I haven't found a usable difference between Element and HTMLElement.

The code to extend only div elements would be:

if (window.HTMLDivElement) {
    HTMLDivElement.prototype.show = function() {
        this.style.visibility = "visible";
    };
}

The following table shows some of the object constructors and related tag names.

Object Constructor	HTML elements (tag)
HTMLBodyElement	body
HTMLDivElement	div
HTMLUListElement	ul
HTMLDListElement	dl
HTMLLIElement	li
HTMLHeadingElement	h1 thru h6
HTMLParagraphElement	p
HTMLImageElement	img
HTMLPreElement	pre
HTMLTableElement	table
HTMLTableSectionElement	thead, tbody
HTMLTableRowElement	tr
HTMLTableCellElement	th, td
HTMLSpanElement	(Firefox) dt, dd, span, var, etc.
HTMLIframeElement	(Firefox) iframe
HTMLElement	All

Most object constructors are the same between Firefox and Safari. A few differences are noted. You can determine the correct constructor by testing an example element with the following code.

var domElement = document.getElementById("example");
alert(domElement.constructor);

Firefox returns the object constructor name (for example, HTMLSpanElement); whereas, Safari returns the object constructor name suffixed with "Constructor" which is dropped (for example, HTMLElementConstructor use HTMLElement).

This has been tested on Firefox 2.0 and Safari 3.0.4 beta (win32)

References:

Developer Mozilla