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

Question

What's the difference between HTMLElement and Element ?

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

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

HTMLElement === Element gives false

Answer 1

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).

Answer 2

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