JavaScript DOM操作核心技巧与性能优化指南

1. JavaScript DOM 操作基础概念

DOM（Document Object Model）是网页与JavaScript交互的核心接口。简单来说，它就像是一个家族树，把HTML文档中的每个元素、属性和文本都表示为节点对象。理解DOM结构是进行任何前端开发的基础。

1.1 DOM节点类型详解

DOM中主要有四种节点类型：

1. 元素节点：对应HTML标签，如<div>、<p>等。这是最常见的节点类型。
2. 文本节点：包含在元素节点内的文本内容，包括空格和换行符。
3. 属性节点：元素的属性，如id、class等。
4. 注释节点：HTML中的注释内容。

在实际开发中，我们最常操作的是元素节点和文本节点。属性节点虽然存在，但通常不直接作为独立节点操作。

1.2 节点关系解析

理解节点间的关系至关重要：

• parentNode：每个节点（除了document）都有一个父节点
• childNodes：包含所有子节点（包括文本节点和注释节点）
• children：只包含元素子节点
• firstChild/lastChild：第一个/最后一个子节点
• nextSibling/previousSibling：相邻的兄弟节点

注意：childNodes和children的区别经常被忽视。childNodes包含所有类型的节点，而children只包含元素节点。这在遍历DOM时尤其重要。

2. 元素获取方法全解析

2.1 传统获取方法

javascript复制// 通过ID获取（返回单个元素）
const elementById = document.getElementById('header');

// 通过类名获取（返回HTMLCollection）
const elementsByClass = document.getElementsByClassName('item');

// 通过标签名获取（返回HTMLCollection）
const elementsByTag = document.getElementsByTagName('div');

这些传统方法仍然有效，但有局限性：

• 只能通过单一条件筛选
• 返回的HTMLCollection是"活的"集合，DOM变化时会自动更新
• 性能略优于querySelector系列

2.2 现代选择器方法

javascript复制// 获取第一个匹配元素
const firstMatch = document.querySelector('.container > .item');

// 获取所有匹配元素（返回NodeList）
const allMatches = document.querySelectorAll('div.item');

querySelector系列的优势：

• 支持所有CSS选择器语法
• 可以组合复杂条件
• 返回的NodeList是静态的（不会随DOM变化自动更新）

性能提示：在简单选择场景下，getElementById比querySelector快约15-20%。但在复杂选