DOM 中 Node 和 Element 类型的区别

在 DOM 中，Node 和 Element 是两个常用的类型。虽然它们都表示文档中的节点，但它们之间有一些区别。

Node 类型

Node 类型是 DOM 树中所有节点的基础类型。它有许多具体的子类型，包括 Element、Text、Comment、Document 等。Node 类型定义了节点的通用属性和方法，例如 nodeName、nodeValue、parentNode、appendChild() 等等。

以下是 Node 类型的一些重要属性和方法：

• nodeName：节点的名称。
• nodeValue：节点的值。
• nodeType：节点的类型，可以是元素节点、文本节点、注释节点、文档节点等。
• parentNode：节点的父节点。
• childNodes：节点的子节点列表。
• appendChild()：将一个节点添加到当前节点的子节点列表的末尾。

Element 类型

Element 类型表示文档中的元素节点。它是 Node 类型的子类型，因此继承了 Node 类型的所有属性和方法，同时还有一些特有的属性和方法。

以下是 Element 类型的一些重要属性和方法：

• tagName：元素的标签名。
• id：元素的唯一标识符。
• className：元素的类名。
• getAttribute()：获取元素的指定属性值。
• setAttribute()：设置元素的指定属性值。

在使用 Element 类型时，您可以使用它的特有属性和方法来操作元素节点。例如，您可以使用 setAttribute() 方法来设置元素的属性，如下所示：

var element = document.createElement("div");
element.setAttribute("class", "my-class");

上面的代码创建了一个新的 div 元素，并为它设置了一个类名为 my-class 的属性。

Node 和 Element 类型的区别

尽管 Node 和 Element 类型都表示文档中的节点，但它们之间有一些重要的区别：

1. Node 类型是 Element 类型的基础类型，因此 Element 类型继承了 Node 类型的所有属性和方法。
2. Element 类型是 Node 类型的子类型，因此它具有一些 Node 类型没有的特定属性和方法，例如 tagName、id、className、getAttribute() 和 setAttribute()。
3. Node 类型可以表示文档中的任何类型的节点，包括元素节点、文本节点、注释节点、文档节点等。而 Element 类型仅表示文档中的元素节点。
4. 在操作 DOM 树时，Node 类型和 Element 类型有不同的用途。通常，您可以使用 Node 类型的通用属性和方法来遍历和操作 DOM 树中的节点，而使用 Element 类型的特定属性和方法来操作元素节点。