16-DOM-Node对象

在 DOM 树结构中，每个元素、文本节点、注释等都是一个 Node 对象，它们都是 Document 对象的子节点。Node 对象代表文档树中的一个节点。

一些常见的方法和属性

1、nodeName 和 nodeType 属性：用于返回当前节点的名称和类型。

var myNode = document.getElementById("my-node");
console.log(myNode.nodeName); // 返回节点名称，如 "DIV" 或 "#text"
console.log(myNode.nodeType); // 返回节点类型，如 1（元素节点）或 3（文本节点）

2、parentNode、childNodes、firstChild 和 lastChild 属性：用于访问和操作当前节点的父节点和子节点。

var myNode = document.getElementById("my-node");
var parentNode = myNode.parentNode; // 获取父节点
var childNodes = myNode.childNodes; // 获取所有子节点
var firstChild = myNode.firstChild; // 获取第一个子节点
var lastChild = myNode.lastChild; // 获取最后一个子节点

3、previousSibling 和 nextSibling 属性：用于获取当前节点的前一个兄弟节点和后一个兄弟节点。

var myNode = document.getElementById("my-node");
var previousSibling = myNode.previousSibling; // 获取前一个兄弟节点
var nextSibling = myNode.nextSibling; // 获取后一个兄弟节点

4、appendChild()、insertBefore() 和 removeChild() 方法：用于向当前节点添加子节点或从当前节点移除子节点。

var myNode = document.getElementById("my-node");
var newChild = document.createElement("div"); // 创建新的子节点
myNode.appendChild(newChild); // 向当前节点添加子节点
var oldChild = myNode.firstChild; // 获取要移除的子节点
myNode.removeChild(oldChild); // 从当前节点移除子节点

5、cloneNode() 方法：用于复制当前节点及其子节点。

var myNode = document.getElementById("my-node");
var clonedNode = myNode.cloneNode(true); // 复制当前节点及其子节点

通过 Node 对象的属性和方法可以访问和操作 DOM 树中的节点，实现对网页结构和内容的各种操作。