How to inherit from the DOM element class

by

It’s not a good idea to do this.

First of all, to inherit from DOM element, you need to have access to that element’s prototype. The problem is that not all browsers provide access to prototypes of DOM elements. Newer Gecko and WebKit -based clients, for example, expose some of these prototypes as global objects – HTMLDivElement, HTMLElement, Element, Node, etc.

For example, plain DIV element usually has a prototype chain similar to:

HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype 
  -> Node.prototype -> Object.prototype -> null

You can access any of them and extend or inherit from as desired. But again, even though you can, I strongly advise not to.

When browser doesn’t expose these prototypes, you’re pretty much out of luck. You can try retrieving them by following constructor property of DOM element itself –

document.createElement('div').constructor;

– but then there’s no guarantee that element has constructor property (e.g. IE6 doesn’t) and even if it does, that this property references “correct” object. If, after all, constructor does reference correct object, there’s still no guarantee that this objects is allowed to be augmented at all. The truth is that host objects are allowed to implement completely bizarre behavior and do not even have to follow rules that native JS objects follow (you can find dozens of such examples in real life).

Second reason you want to avoid inheriting from DOM element prototypes is that mechanism of such inheritance is not really specified anywhere; it could be quirky, unpredictable and overall fragile and unreliable.

Yes, you can create a constructor that would initialize objects with proper prototype chain (i.e. having DOM prototype in it):

function MyDivElement(){}
MyDivElement.prototype = HTMLDivElement.prototype;

var myDiv = new MyDivElement();
typeof myDiv.appendChild; // "function"

– but this is as much as it goes, and usefulness of this whole approach becomes limited by having certain methods in prototype and nothing else –

typeof myDivElement.nodeName; // "undefined"
myDivElement.innerHTML = '<span>foo<\/span>';
myDivElement.childNodes; // Error

Until some standard specifies exact mechanism for inheriting from DOM prototypes (and browsers actually implement that mechanism), it’s best to leave them alone, and perhaps try alternative approach – e.g. wrapper or decorator patterns rather than prototype one 🙂

More Related Contents:

  1. How to find event listeners on a DOM node in JavaScript or in debugging?
  2. Check if an element contains a class in JavaScript?
  3. How do you check if a JavaScript Object is a DOM Object?
  4. Chrome extension – retrieving global variable from webpage
  5. innerText vs innerHTML vs label vs text vs textContent vs outerText
  6. Why is the value of my input always empty if I store it in a variable?
  7. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  8. How to convert a DOM node list to an array in Javascript?
  9. Using this inside an event handler
  10. How to scroll down with Phantomjs to load dynamic content
  11. Difference between Element.value and Element.getAttribute(“value”)
  12. Are event handlers in JavaScript called in order?
  13. HTML DOM: Which events do not bubble?
  14. In JavaScript, what is the best way to convert a NodeList to an array?
  15. How to avoid no-param-reassign when setting a property on a DOM object
  16. DOM / pure JavaScript solution to jQuery.closest() implementation?
  17. Finding child element of parent with JavaScript
  18. Is there any way of passing additional data via custom events?
  19. Is event a global variable that is accessible everywhere inside the callback chain?
  20. What damage is done by document.write()? [duplicate]
  21. Javascript DOM: Setting custom DOM element properties
  22. How can I remove wrapper (parent element) without removing the child?
  23. How to properly unload/destroy a VIDEO element
  24. How to add a onclick event to an element using javascript
  25. How to get element by class name
  26. Test if an element can contain text
  27. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  28. Replacement for deprecated `keypress` DOM event
  29. Screen Coordinates of a element, via Javascript
  30. Vanilla JS event delegation – dealing with child elements of the target element

Leave a Comment