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

Question

我正在学习javascript。

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

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

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

那么HTMLSpanElement的用途是什么？它是否具有与其他HTMLElements不同的任何属性？

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％万无一失，但它适用于所有内置对象。