JavaScript DOM 节点操作

一、DOM 节点

节点类型（Node Types）

二、查找节点

1.查找父节点

1. parentNode

2. parentElement

2.查找子节点

1. childNodes

2. children

3. firstChild / lastChild

4. firstElementChild / lastElementChild

3.查找兄弟节点

1. previousSibling / nextSibling

2. previousElementSibling / nextElementSibling

4.查找特定祖先节点

closest(selector)

5.检查节点关系

contains(node)

6.综合示例

HTML 结构：

JavaScript 操作：

7.注意事项

三、增加节点

1. 创建节点

2. 插入节点

3. 插入 HTML 字符串

四、删除节点

1. 传统方法

2. 现代方法（ES6+）

五、替换节点

1. replaceChild()

2. replaceWith()（ES6+）

六、克隆节点

方法语法

示例代码

克隆注意事项

七、最佳实践与性能优化

示例：

一、DOM 节点

DOM（Document Object Model）节点 是 HTML 或 XML 文档中每个独立单元的抽象表示。整个文档被建模为一个树形结构（DOM 树），其中每个节点对应文档的一部分（如元素、属性、文本等）。节点是 DOM 操作的基本单位，通过 JavaScript 可以动态访问和修改节点，实现页面交互。

节点类型（Node Types）

DOM 规范定义了多种节点类型，每个类型通过 nodeType 属性标识（值为整数常量）：

节点类型	nodeType 值	说明
元素节点	`1` (Node.ELEMENT_NODE)	表示 HTML 标签（如 `<div>`, `<p>`）
属性节点	`2` (Node.ATTRIBUTE_NODE)	表示元素的属性（如 `id="content"`，已弃用，推荐用 `element.attributes`）
文本节点	`3` (Node.TEXT_NODE)	表示元素内的文本内容（包括空格和换行）
注释节点	`8` (Node.COMMENT_NODE)	表示 HTML 注释（如 `<!-- 注释 -->`）
文档节点	`9` (Node.DOCUMENT_NODE)	表示整个文档（根节点，如 `document`）
文档片段节点	`11` (Node.DOCUMENT_FRAGMENT_NODE)	轻量级容器，用于批量操作节点（如 `document.createDocumentFragment()`）

二、查找节点

1.查找父节点

1. `parentNode`

说明：返回任何类型的父节点（元素、文档、文档片段等）。

示例：

const child = document.querySelector('.child');
const parent = child.parentNode; // 父元素节点

2. `parentElement`

说明：仅返回元素类型的父节点。

示例：

const parent = child.parentElement; // 父元素节点（非元素返回 null）

2.查找子节点

1. `childNodes`

说明：返回所有子节点的动态集合（包括元素、文本、注释等）。

示例：

const children = parent.childNodes; // NodeList

2. `children`

说明：返回所有元素子节点的动态集合（HTMLCollection）。

示例：

const elements = parent.children; // 仅元素节点

3. `firstChild` / `lastChild`

说明：返回第一个/最后一个子节点（包括非元素节点）。

示例：

const first = parent.firstChild; // 可能是文本节点
const last = parent.lastChild;

4. `firstElementChild` / `lastElementChild`

说明：返回第一个/最后一个元素子节点。

示例：

const firstElement = parent.firstElementChild; // 第一个元素子节点
const lastElement = parent.lastElementChild;

3.查找兄弟节点

1. `previousSibling` / `nextSibling`

说明：返回前一个/后一个兄弟节点（包括非元素节点）。

示例：

const prevSibling = element.previousSibling; // 可能是文本节点
const nextSibling = element.nextSibling;

2. `previousElementSibling` / `nextElementSibling`

说明：返回前一个/后一个元素兄弟节点。

示例：

const prevElement = element.previousElementSibling; // 前一个元素节点
const nextElement = element.nextElementSibling;