编辑“︁JavaScript DOM操作”︁

= JavaScript DOM操作 =

DOM（'''D'''ocument '''O'''bject '''M'''odel，文档对象模型）是JavaScript与网页交互的核心接口。它允许开发者动态访问、修改HTML和XML文档的结构、样式和内容。本章将详细介绍DOM操作的基本概念、常用方法及实际应用。

== 什么是DOM？ ==
DOM是浏览器将HTML文档解析为树状结构的对象模型，每个HTML元素（如`<div>`、`<p>`）对应树中的一个节点。JavaScript通过DOM API操作这些节点，实现动态网页效果。

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

== 基本DOM操作 ==
=== 1. 选择元素 ===
通过以下方法获取DOM节点：
<syntaxhighlight lang="javascript">
// 通过ID获取
const header = document.getElementById('header');

// 通过类名获取（返回类数组）
const buttons = document.getElementsByClassName('btn');

// 通过标签名获取
const paragraphs = document.getElementsByTagName('p');

// 现代选择器（返回第一个匹配元素）
const item = document.querySelector('.item');

// 返回所有匹配元素（NodeList）
const items = document.querySelectorAll('.item');
</syntaxhighlight>

=== 2. 修改内容与属性 ===
<syntaxhighlight lang="javascript">
// 修改文本内容
element.textContent = "新文本";

// 修改HTML内容（注意XSS风险）
element.innerHTML = "<strong>加粗文本</strong>";

// 修改属性
element.setAttribute('data-id', '123');
const id = element.getAttribute('data-id');
</syntaxhighlight>

=== 3. 样式操作 ===
<syntaxhighlight lang="javascript">
// 直接修改样式
element.style.color = 'red';
element.style.fontSize = '16px';

// 通过类名控制
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');
</syntaxhighlight>

== 节点操作 ==
=== 创建与添加节点 ===
<syntaxhighlight lang="javascript">
// 创建新元素
const newDiv = document.createElement('div');
newDiv.textContent = "我是新创建的div";

// 添加到DOM中
document.body.appendChild(newDiv);

// 插入到特定位置
const parent = document.querySelector('#container');
const referenceNode = parent.querySelector('.child');
parent.insertBefore(newDiv, referenceNode);
</syntaxhighlight>

=== 删除节点 ===
<syntaxhighlight lang="javascript">
const elementToRemove = document.querySelector('#old-item');
elementToRemove.parentNode.removeChild(elementToRemove);

// 现代简写
elementToRemove.remove();
</syntaxhighlight>

== 事件处理 ==
DOM事件允许响应用户交互：
<syntaxhighlight lang="javascript">
// 添加点击事件
const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
    console.log('按钮被点击！', event.target);
});

// 事件委托示例
document.querySelector('#list').addEventListener('click', (e) => {
    if (e.target.classList.contains('item')) {
        alert(`点击了项目: ${e.target.textContent}`);
    }
});
</syntaxhighlight>

== 性能优化 ==
频繁DOM操作会影响性能，建议：
* 使用`documentFragment`批量操作
* 避免在循环中直接操作DOM
* 对重复操作进行缓存

<syntaxhighlight lang="javascript">
// 使用文档片段优化
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `项目 ${i}`;
    fragment.appendChild(li);
}
document.querySelector('#list').appendChild(fragment);
</syntaxhighlight>

== 实际案例 ==
=== 动态表格生成 ===
<syntaxhighlight lang="javascript">
function createTable(data) {
    const table = document.createElement('table');
    const thead = table.createTHead();
    const tbody = table.createTBody();

    // 创建表头
    const headerRow = thead.insertRow();
    Object.keys(data[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });

    // 填充数据
    data.forEach(item => {
        const row = tbody.insertRow();
        Object.values(item).forEach(value => {
            const cell = row.insertCell();
            cell.textContent = value;
        });
    });

    return table;
}

// 使用示例
const userData = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 }
];
document.body.appendChild(createTable(userData));
</syntaxhighlight>

=== 表单验证 ===
<syntaxhighlight lang="javascript">
document.querySelector('#myForm').addEventListener('submit', (e) => {
    const email = document.querySelector('#email').value;
    if (!email.includes('@')) {
        e.preventDefault();
        alert('请输入有效的电子邮件地址');
    }
});
</syntaxhighlight>

== 高级主题 ==
=== 虚拟DOM ===
现代框架（如React）使用虚拟DOM提高性能：
* 内存中维护轻量级DOM副本
* 通过diff算法找出最小变更
* 批量更新真实DOM

=== Shadow DOM ===
Web Components的核心技术，提供封装：
<syntaxhighlight lang="javascript">
const host = document.querySelector('#host-element');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>p { color: blue; }</style>
                       <p>这段文字在Shadow DOM中</p>`;
</syntaxhighlight>

== 总结 ==
DOM操作是前端开发的基础技能，掌握它能让你：
1. 创建动态交互式网页
2. 高效更新页面内容
3. 响应用户输入
4. 构建复杂的Web应用

通过本章的学习，你应该已经理解了DOM的核心概念和常用操作。建议通过实际项目练习这些技术，逐步掌握更高级的DOM操作技巧。

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