javascript - HTMLSpanElement(和其他)有什么用

Question

我正在学习 JavaScript。

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

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

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

那么 HTMLSpanElement 有什么用呢？它与其他 HTMLElements 有什么不同的属性吗？

Answer 1

由于您是初学者，我将指出一些基本事实，以帮助您理解所观察到的内容。

JavaScript 是弱类型的

JavaScript 中的对象确实有类型，但变量没有类型，即任何变量都可以采用任何类型的任何对象。类型转换不是必需的，也不可能(事实上 (HTMLSpanElement) document.getElementById('lblMsg') 行是一个语法错误)。

HTML 元素类型

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

接口(interface)的要点是公开一组可供所有实现使用的方法、属性或事件。您已经拥有 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% 万无一失，但它适用于所有内置对象。