typescript中HTMLElement 和 Element的区别

引言

你可能会注意到在ts中，通过document.getElementById()返回HTMLElement类型，而document.querySelect()返回Element类型。

区别

那么两者区别是什么呢？

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

探讨

查资料的过程中我发现，关于getElementById和querySelecter在MDN和ts的规范并不相同。

• ts中

  let res =document.getElementById('test');  //HTMLElement
  let el = document.querySelector('# test');  // Element
  

• mdn中
  querySelector，getElementById两者均返回Element。