为何Element实例可调用HTMLElement的属性与方法？

已知HTMLElement继承自Element接口，但为何Element类型的对象能使用HTMLElement定义的属性和方法？比如以下代码中，querySelector返回标注为Element类型的对象，而style属性是HTMLElement的成员，却能成功设置；且该对象instanceof HTMLElement返回true。按Element的继承链，它仅继承自EventTarget、Node、Element，理应只有这三者的instanceof判断为true，疑惑是否存在反向继承？

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

回答 #

核心误解在于混淆了类型标注和实际实例类型：

• querySelector的返回类型标注为Element，是因为它可能返回任意类型的DOM元素（比如SVGElement也是Element的子类），但实际返回的对象是具体的子类实例——比如你代码里的#lname是HTML表单元素，实际就是HTMLElement的实例（甚至是更具体的HTMLInputElement）。
• DOM的继承链是HTMLElement → Element → Node → EventTarget，也就是说HTMLElement是Element的子类，所以HTMLElement的实例同时也是Element、Node、EventTarget的实例。instanceof操作符会顺着原型链向上检查，只要原型链上存在对应的构造函数，就会返回true，因此somefield instanceof HTMLElement返回true完全合理，不存在反向继承。
• style是HTMLElement定义的属性，既然实际实例是HTMLElement，自然可以直接访问这个属性；类型标注的Element只是一个更宽泛的父类型，不影响实例本身的实际能力。

内容的提问来源于stack exchange，提问作者Muhammad Hamid Rafique