Node 和 Element：精通 DOM 核心元素

Node 和 Element 之间的区别在于，Node 可以是任何 DOM 对象，而 Element 只表示 HTML 元素。Node 具有更多的属性和方法，因为它可以表示各种类型的对象。例如，Node 有一个名为 "nodeType" 的属性，它可以告诉你该节点的类型。Element 也有一个名为 "nodeType" 的属性，但它总是返回 1，表示该节点是一个元素。

Node 和 Element 都可以有子节点。Node 的子节点可以是任何类型的 Node，而 Element 的子节点只能是 Element 或 Text Node。

Node 和 Element 都是非常重要的概念，理解它们之间的区别对于前端开发人员来说非常重要。

Node 的属性和方法

Node 有很多属性和方法，其中一些最重要的包括：

• nodeType：返回该节点的类型。
• nodeName：返回该节点的名称。
• parentNode：返回该节点的父节点。
• childNodes：返回该节点的所有子节点。
• firstChild：返回该节点的第一个子节点。
• lastChild：返回该节点的最后一个子节点。
• nextSibling：返回该节点的下一个兄弟节点。
• previousSibling：返回该节点的前一个兄弟节点。
• appendChild()：向该节点添加一个子节点。
• removeChild()：从该节点中删除一个子节点。

Element 的属性和方法

Element 具有 Node 的所有属性和方法，此外它还有一些自己的属性和方法，其中一些最重要的包括：

• tagName：返回该元素的标签名。
• attributes：返回该元素的所有属性。
• getAttribute()：返回该元素的指定属性的值。
• setAttribute()：设置该元素的指定属性的值。
• removeAttribute()：从该元素中删除指定的属性。

Node 和 Element 的示例

以下是一些示例，说明如何使用 Node 和 Element：

// 获取文档中的所有元素
var elements = document.getElementsByTagName("*");

// 遍历所有元素并打印其标签名
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].tagName);
}

// 获取第一个元素的子节点
var firstChild = document.body.firstChild;

// 打印第一个子节点的类型
console.log(firstChild.nodeType);

// 获取第一个元素的第一个子元素
var firstElementChild = document.body.firstElementChild;

// 打印第一个子元素的标签名
console.log(firstElementChild.tagName);

// 向第一个元素添加一个子元素
var newElement = document.createElement("div");
document.body.appendChild(newElement);

// 从第一个元素中删除一个子元素
var lastChild = document.body.lastChild;
document.body.removeChild(lastChild);

总结

Node 和 Element 是 DOM 中非常重要的两个概念。理解它们之间的区别对于前端开发人员来说非常重要。Node 可以是任何 DOM 对象，而 Element 只表示 HTML 元素。Node 有很多属性和方法，因为它可以表示各种类型的对象。Element 也有很多属性和方法，但它只适用于 HTML 元素。