JavaScript DOM基础

JavaScript DOM基础

文档对象模型（DOM）是JavaScript与网页内容交互的核心接口，它将HTML和XML文档表示为节点树结构，允许开发者通过编程方式动态访问和修改页面内容、结构和样式。本条目全面介绍DOM的基础概念、操作方法及实际应用。

DOM概述

DOM（Document Object Model）是W3C制定的跨平台标准，其核心功能包括：

• 节点树表示：将HTML文档解析为包含元素、属性、文本的层级结构
• 编程接口：提供JavaScript可调用的方法和属性
• 动态更新：实时修改文档而不需刷新页面

graph TD A[Document] --> B[html] B --> C[head] B --> D[body] C --> E[title] D --> F[h1] D --> G[div] G --> H[p] G --> I[p]

核心概念

节点类型

DOM定义12种节点类型，最常见的有：

• 元素节点：HTML标签（如
  ）
• 属性节点：元素的属性（如class="container"）
• 文本节点：元素内的文本内容

节点关系

通过节点属性可遍历DOM树：

• parentNode
• childNodes
• firstChild/lastChild
• nextSibling/previousSibling

DOM操作方法

元素选择

方法	描述	返回
document.getElementById()	通过ID选择	单个元素
document.querySelector()	CSS选择器匹配	第一个元素
document.getElementsByClassName()	通过类名选择	动态HTMLCollection

示例：

// 选择ID为header的元素
const header = document.getElementById('header');

// 选择首个button元素
const btn = document.querySelector('button.primary');

// 选择所有包含warning类的元素
const warnings = document.getElementsByClassName('warning');

内容修改

属性/方法	描述
innerHTML	获取/设置元素的HTML内容
textContent	获取/设置元素的文本内容
setAttribute()	设置元素属性值

// 修改段落内容
document.querySelector('p').textContent = '新文本内容';

// 添加CSS类
document.getElementById('menu').classList.add('active');

// 修改图片源
document.querySelector('img.logo').setAttribute('src', 'new-logo.png');

事件处理

DOM事件处理流程： 1. 事件触发（如点击、键盘输入） 2. 创建事件对象 3. 执行事件处理函数

事件监听

// 方法1：HTML属性
<button onclick="handleClick()">点击</button>

// 方法2：DOM属性
document.getElementById('btn').onclick = function() {
    console.log('按钮被点击');
};

// 方法3：addEventListener（推荐）
const btn = document.querySelector('#submit');
btn.addEventListener('click', (event) => {
    event.preventDefault();
    console.log('表单已提交');
});

实际案例

动态列表管理

// 添加新列表项
function addListItem() {
    const list = document.getElementById('todo-list');
    const newItem = document.createElement('li');
    newItem.textContent = '新任务 ' + (list.children.length + 1);
    list.appendChild(newItem);
}

// 删除最后一项
function removeLastItem() {
    const list = document.getElementById('todo-list');
    if (list.lastChild) {
        list.removeChild(list.lastChild);
    }
}

表单验证

document.getElementById('contact-form').addEventListener('submit', (e) => {
    const email = document.getElementById('email').value;
    if (!email.includes('@')) {
        e.preventDefault();
        document.getElementById('error').textContent = '请输入有效邮箱';
    }
});

性能优化建议

• 缓存DOM查询结果
• 使用事件委托减少监听器数量
• 批量DOM操作使用文档片段（DocumentFragment）
• 避免频繁读写布局属性（如offsetWidth）

// 使用文档片段优化批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const item = document.createElement('div');
    item.textContent = `项目 ${i}`;
    fragment.appendChild(item);
}
document.body.appendChild(fragment);

数学表示

DOM树的深度复杂度为$O(n)$，其中$n$为节点总数。事件冒泡的时间复杂度为$O(h)$，$h$为DOM树高度。

进阶概念

• 虚拟DOM原理
• Shadow DOM
• MutationObserver API
• 事件捕获与冒泡机制

通过掌握这些DOM基础知识，开发者可以创建动态交互的现代Web应用。建议配合浏览器开发者工具实践练习，深入理解DOM操作的实际效果。