typescript基本数据类型HTMLElement与Element区别

请看下面的完整攻略：

HTMLElement 与 Element 的区别

HTMLElement

HTMLElement 是 HTML 文档中某个元素的具体类型，该类型包含了所有 HTML 元素的共有属性和方法，如 CSSStyleDeclaration 和 EventTarget。

举个例子：

const element = document.createElement('div');
if (element instanceof HTMLDivElement) {
  // element 是 HTMLDivElement 的一个实例
}

在上面的代码中，我们创建了一个 div 元素的实例，该实例是 HTMLDivElement 的一个具体类型，我们可以通过 instanceof 运算符来判断。

Element

Element 是 HTMLElement 的基本类型，它表示文档中任何类型的标记元素（如 div、span、p 等），包括非 HTML 元素。 Element 类型只包含最基本的属性（如 tagName 和 attributes）和方法（如 getAttribute() 和 setAttribute()）。

举个例子：

const element = document.createElement('foo');
if (element instanceof Element) {
  // element 是 Element 的一个实例
}

在上面的代码中，我们创建了一个标记元素 foo 的实例，该实例是 Element 的一个具体类型，我们也可以通过 instanceof 运算符来判断。

HTMLElement 与 Element 的区别

因此，HTMLElement 指代了文档中具体的 HTML 元素类型，而 Element 指代了文档中标记元素的最基本类型，包括了 HTMLElement。两者的主要区别在于 HTMLElement 比 Element 多了许多具体的属性和方法，而 Element 不包含这些具体的属性和方法。

下面是两个示例：

示例一：

const div = document.createElement('div');
console.log(div instanceof HTMLDivElement); // true
console.log(div instanceof Element); // true

const span = document.createElement('span');
console.log(span instanceof HTMLSpanElement); // true
console.log(span instanceof Element); // true
console.log(span instanceof HTMLElement); // true

在上面的代码中，我们创建了一个 div 元素和一个 span 元素，分别判断了它们的类型。由于 HTMLDivElement 和 HTMLSpanElement 继承自 HTMLElement，因此 div 和 span 都是 HTMLElement 的实例，同时它们也是 Element 的实例。

示例二：

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

console.log(svg instanceof SVGElement); // true
console.log(svg instanceof Element); // true
console.log(svg instanceof HTMLElement); // false

在上面的代码中，我们使用 createElementNS() 方法来创建一个 svg 元素，该元素属于 SVG 命名空间。由于 SVG 元素不属于 HTML 元素，因此它不是 HTMLElement 的实例，但它是 Element 的一个实例。同时，由于 SVGElement 继承自 Element，因此 svg 也是 SVGElement 的实例。

这就是 HTMLElement 与 Element 的区别，希望能够帮助你更好地理解这两个概念。