节点属性：type，tag 和 content

让我们更深入地了解一下 DOM 节点。
在本章中，我们将更深入地了解它们是什么，并学习它们最常用的属性。

DOM 节点类

不同的 DOM 节点可能有不同的属性。例如，标签 相对应的元素节点具有链接相关的（link-related）属性，标签 相对应的元素节点具有与输入相关的属性，等。文本节点与元素节点不同。但是所有这些标签对应的 DOM 节点之间也存在共有的属性和方法，因为所有类型的 DOM 节点都形成了一个单一层次的结构（single hierarchy）。

每个 DOM 节点都属于相应的内建类。
层次结构（hierarchy）的根节点是 EventTarget，Node 继承自它，其他 DOM 节点继承自 Node。
下图做了进一步说明：
类如下所示：

• EventTarget — 是根的“抽象（abstract）”类。该类的对象从未被创建。它作为一个基础，以便让所有 DOM 节点都支持所谓的“事件（event）”，我们会在之后学习它。
• Node — 也是一个“抽象”类，充当 DOM 节点的基础。它提供了树的核心功能：parentNode，nextSibling，childNodes 等（它们都是 getter）。Node 类的对象从未被创建。但是有一些继承自它的具体的节点类，例如：文本节点的 Text，元素节点的 Element，以及更多异域（exotic）类，例如注释节点的 Comment。
• Element — 是 DOM 元素的基本类。它提供了元素级的导航（navigation），例如 nextElementSibling，children，以及像 getElementsByTagName 和 querySelector 这样的搜索方法。浏览器中不仅有 HTML，还会有 XML 和 SVG。Element 类充当更多特定类的基本类：SVGElement，XMLElement 和 HTMLElement。
• HTMLElement — 最终是所有 HTML 元素的基本类。各种 HTML 元素均继承自它：
  • HTMLInputElement — 元素的类，
  • HTMLBodyElement — 元素的类，
  • HTMLAnchorElement — 元素的类，
  • ……等，每个标签都有自己的类，这些类可以提供特定的属性和方法。

因此，给定节点的全部属性和方法都是继承的结果。
例如，我们考虑一下 元素的 DOM 对象。它属于 HTMLInputElement 类。
它获取属性和方法，并将其作为下列类（按继承顺序列出）的叠加：

• HTMLInputElement — 该类提供特定于输入的属性，
• HTMLElement — 它提供了通用（common）的 HTML 元素方法（以及 getter 和 setter）
• Element — 提供通用（generic）元素方法，
• Node — 提供通用 DOM 节点属性，
• EventTarget — 为事件（包括事件本身）提供支持，
• ……最后，它继承自 Object，因为像 hasOwnProperty 这样的“普通对象”方法也是可用的。

我们可以通过回调来查看 DOM 节点类名，因为对象通常都具有 constructor 属性。它引用类的 constructor，constructor.name 就是它的名称：

alert( document.body.constructor.name ); // HTMLBodyElement

……或者我们可以对其使用 toString 方法：

alert( document.body ); // [object HTMLBodyElement]

我们还可以使用 instanceof 来检查继承：

alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true