What's the difference between `HTMLElement` and `Element`?

What's the difference between HTMLElement and E开发者_运维技巧lement ?

document.createElement("div") instanceof Element gives true

document.createElement("div") instanceof HTMLElement gives true

HTMLElement === Element gives false

An HTMLElement is an Element, as defined in the HTML extension to the DOM Level 2 Core specification:

interface HTMLElement : Element {
           attribute DOMString       id;
           attribute DOMString       title;
           attribute DOMString       lang;
           attribute DOMString       dir;
           attribute DOMString       className;
};

Element (per specification) refers to the Element interface as it is defined in the DOM Core Level 2 specification (there is also another DOM Core specification (working draft) though).

Update: There are a lot of specifications out there and it is not totally clear which browsers use which one (to me).

Maybe someone else has more insight...

But in any case, Element is a more generic interface than HTMLElement and the latter inherits from the former.

Update 2: A nice way to see the inheritance structure is to execute console.dir(elementReference) for any element (works in Chrome/Safari, needs Firebug for Firefox).

HTMLElement refers explicitly to an HTML element whereas Element may refer to an XML element. However, HTMLElement is technically a subset of Element.

HTMLElements inherit from Element which inherit from Node.

This means that your HTMLElement is simultaneously an instanceof all three. The fact that it is an HTMLElement means it has an interface that's contains methods only an HTMLElement would need like attachEvent.