HTMLSpanElement（和其他）的用途是什么

Question

我正在学习 JavaScript。

var label = document.getElementById('lblMsg');

如果我用 F12 检查元素，它被描述为 HTMLSpanElement。我无法将元素转换为它的类型，例如：

var label = (HTMLSpanElement) document.getElementById('lblMsg');

那么 HTMLSpanElement 有什么用呢？它是否具有与其他 HTMLElement 不同的属性？

Answer 1

由于您是初学者，因此我将指出一些基本事实，这些事实可能会帮助您了解所观察到的内容。

JavaScript 是弱类型的

JavaScript 中的对象 do 有类型，但变量没有类型，即任何变量都可以接受任何类型的任何对象。类型转换不是必需的，也不可能（实际上(HTMLSpanElement) document.getElementById('lblMsg') 行是语法错误）。

HTML 元素类型

HTMLSpanElement 是一种类型。嗯，不是真的。它是一个 DOM 接口，为方便起见，所有现代浏览器都将其视为本机对象类型。大多数 HTML 元素都有其主界面的类型。

接口的重点是公开一组可用于所有实现的方法、属性或事件。您已经拥有HTMLSpanElement 的 MDN 链接：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement。

测试类型

要测试一个对象是否是特定类型的实例，我们可以使用obj instanceof Type。在这种情况下：

if (document.getElementById('lblMsg') instanceof HTMLSpanElement)
{
    ...
}

始终遵循类型继承。

document.getElementById('lblMsg') instanceof Object // true

获取对象的类型

要获取 HTML 元素的类型，我们使用element.constructor，如

document.getElementById('lblMsg').constructor

如果你在浏览器控制台输入这个，你会看到类似

`function HTMLSpanElement() { [native code] }`

不要惊讶。对象类型是 JavaScript 中的函数。如果我们只对这个对象类型的名称感兴趣，我们可以使用

document.getElementById('lblMsg').constructor.name

产生字符串"HTMLSpanElement"

这种确定对象类型的方法并非 100% 万无一失，但它适用于所有内置对象。