CODEWITHSUNDEEP
javascript
Li Juan
Li Juan

Reputation: 1457

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

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

Upvotes: 112

Views: 39009

Answers (3)

jerluc
jerluc

Reputation: 4316

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

Upvotes: 59

Thomas
Thomas

Reputation: 5856

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.

Upvotes: 19

Felix Kling
Felix Kling

Reputation: 816424

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

Upvotes: 57

Related Questions