编辑“︁JavaScript DOM基础”︁（章节）

= JavaScript DOM基础 =

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

== DOM概述 ==

DOM（Document Object Model）是W3C制定的跨平台标准，其核心功能包括：
* '''节点树表示'''：将HTML文档解析为包含元素、属性、文本的层级结构
* '''编程接口'''：提供JavaScript可调用的方法和属性
* '''动态更新'''：实时修改文档而不需刷新页面

<mermaid>
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]
</mermaid>

== 核心概念 ==

=== 节点类型 ===
DOM定义12种节点类型，最常见的有：
* '''元素节点'''：HTML标签（如<code><div></code>）
* '''属性节点'''：元素的属性（如<code>class="container"</code>）
* '''文本节点'''：元素内的文本内容

=== 节点关系 ===
通过节点属性可遍历DOM树：
* <code>parentNode</code>
* <code>childNodes</code>
* <code>firstChild</code>/<code>lastChild</code>
* <code>nextSibling</code>/<code>previousSibling</code>

== DOM操作方法 ==

=== 元素选择 ===
{| class="wikitable"
! 方法 !! 描述 !! 返回
|-
| <code>document.getElementById()</code> || 通过ID选择 || 单个元素
|-
| <code>document.querySelector()</code> || CSS选择器匹配 || 第一个元素
|-
| <code>document.getElementsByClassName()</code> || 通过类名选择 || 动态HTMLCollection
|}

示例：
<syntaxhighlight lang="javascript">
// 选择ID为header的元素
const header = document.getElementById('header');

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

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

=== 内容修改 ===
{| class="wikitable"
! 属性/方法 !! 描述
|-
| <code>innerHTML</code> || 获取/设置元素的HTML内容
|-
| <code>textContent</code> || 获取/设置元素的文本内容
|-
| <code>setAttribute()</code> || 设置元素属性值
|}

<syntaxhighlight lang="javascript">
// 修改段落内容
document.querySelector('p').textContent = '新文本内容';

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

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

== 事件处理 ==

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

=== 事件监听 ===
<syntaxhighlight lang="javascript">
// 方法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('表单已提交');
});
</syntaxhighlight>

== 实际案例 ==

=== 动态列表管理 ===
<syntaxhighlight lang="javascript">
// 添加新列表项
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);
    }
}
</syntaxhighlight>

=== 表单验证 ===
<syntaxhighlight lang="javascript">
document.getElementById('contact-form').addEventListener('submit', (e) => {
    const email = document.getElementById('email').value;
    if (!email.includes('@')) {
        e.preventDefault();
        document.getElementById('error').textContent = '请输入有效邮箱';
    }
});
</syntaxhighlight>

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

<syntaxhighlight lang="javascript">
// 使用文档片段优化批量插入
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);
</syntaxhighlight>

== 数学表示 ==
DOM树的深度复杂度为<math>O(n)</math>，其中<math>n</math>为节点总数。事件冒泡的时间复杂度为<math>O(h)</math>，<math>h</math>为DOM树高度。

== 进阶概念 ==
* 虚拟DOM原理
* Shadow DOM
* MutationObserver API
* 事件捕获与冒泡机制

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

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]