[FIXED] Why can the same methods as HTMLElement be applied to an instance of Element?

Issue

HTMLElement inherits properties/methods from the Element interface. But, why on an instance of Element, it works even when I use the same properties and methods which are defined on HTMLElement. For example, in the given code, querySelector gives back Element which doesn't have a style property defined on it (HTMLElement does). But, it works when I apply the style property on it. Also, instanceof HTMLElement gives back true. It should only be instanceof Event, Node, and Element that gives back true since Element inherits from all three. I know HTMLElement can inherit methods/properties from Element but is it also vice-versa? MDN Docs DOM Interfaces

var somefield = document.querySelector('#lname');
somefield.style.background = 'yellow'
somefield instanceof HTMLElement; //True

Solution

There are no elements on a page that are just Element instances. The interface serves as a parent "class" so HTMLElement, SVGElement and XULElement (and others) can inherit methods common to all elements.

Answered By - connexo

Answer Checked By - Marie Seifert (PHPFixing Admin)