编辑“︁DOM操作”︁（章节）

= DOM操作 =

DOM（'''D'''ocument '''O'''bject '''M'''odel，文档对象模型）是HTML和XML文档的编程接口，它提供了对文档的结构化表示，并定义了一种方式使程序可以动态访问和更新文档的内容、结构及样式。DOM操作是前端开发中的核心技能之一，涉及对网页元素的增删改查以及事件处理等。

== DOM简介 ==
DOM将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。这种结构允许开发者通过JavaScript等脚本语言动态修改页面内容、样式和行为。

DOM树的节点类型包括：
* '''元素节点'''（如<code><div></code>、<code><p></code>）
* '''文本节点'''（元素内的文本内容）
* '''属性节点'''（如<code>id</code>、<code>class</code>）

<mermaid>
graph TD
    A[Document] --> B[html]
    B --> C[head]
    B --> D[body]
    C --> E[title]
    D --> F[div]
    D --> G[p]
    F --> H["文本节点"]
    G --> I["文本节点"]
    F --> J[属性节点 class="box"]
</mermaid>

== 基本DOM操作 ==

=== 查询DOM元素 ===
常用方法：
* <code>document.getElementById(id)</code>：通过ID获取元素
* <code>document.querySelector(selector)</code>：通过CSS选择器获取第一个匹配元素
* <code>document.querySelectorAll(selector)</code>：获取所有匹配元素

<syntaxhighlight lang="javascript">
// 示例：查询元素
const header = document.getElementById('header'); // 通过ID
const firstButton = document.querySelector('.btn'); // 通过类名
const allImages = document.querySelectorAll('img'); // 所有图片元素

console.log(header); // 输出: <div id="header">...</div>
console.log(allImages.length); // 输出: 图片数量
</syntaxhighlight>

=== 修改元素内容 ===
* <code>innerHTML</code>：获取或设置元素的HTML内容
* <code>textContent</code>：获取或设置元素的文本内容

<syntaxhighlight lang="javascript">
// 修改内容示例
const div = document.querySelector('#content');
div.innerHTML = '<strong>新内容</strong>'; // 会解析HTML标签
div.textContent = '<strong>纯文本</strong>'; // 直接显示为文本

console.log(div.innerHTML); // 输出: "&lt;strong&gt;纯文本&lt;/strong&gt;"
</syntaxhighlight>

=== 修改元素属性和样式 ===
* <code>setAttribute(name, value)</code>：设置属性
* <code>style.property</code>：直接修改样式

<syntaxhighlight lang="javascript">
// 属性和样式修改
const img = document.querySelector('img');
img.setAttribute('alt', '示例图片'); // 添加alt属性
img.style.border = '2px solid red'; // 添加边框样式
</syntaxhighlight>

== 高级DOM操作 ==

=== 创建和插入节点 ===
* <code>document.createElement(tagName)</code>：创建新元素
* <code>parentNode.appendChild(childNode)</code>：追加子节点
* <code>parentNode.insertBefore(newNode, referenceNode)</code>：在指定节点前插入

<syntaxhighlight lang="javascript">
// 创建并插入节点
const newDiv = document.createElement('div');
newDiv.textContent = '动态创建的内容';
document.body.appendChild(newDiv); // 添加到body末尾

const existingDiv = document.querySelector('.existing');
document.body.insertBefore(newDiv, existingDiv); // 插入到existingDiv之前
</syntaxhighlight>

=== 事件处理 ===
DOM事件允许JavaScript对用户交互做出响应：

<syntaxhighlight lang="javascript">
// 事件监听示例
const button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
    console.log('按钮被点击!', event);
    this.style.backgroundColor = 'blue'; // 点击后变蓝
});
</syntaxhighlight>

== 性能优化 ==
频繁的DOM操作会影响页面性能，建议：
* 使用<code>documentFragment</code>进行批量操作
* 避免在循环中直接操作DOM
* 对重复查询的元素进行缓存

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

== 实际应用案例 ==
'''动态表单验证'''：通过DOM操作实现实时表单验证

<syntaxhighlight lang="javascript">
// 表单验证示例
const emailInput = document.getElementById('email');
const errorMsg = document.createElement('div');
errorMsg.className = 'error';

emailInput.addEventListener('blur', function() {
    if(!this.value.includes('@')) {
        errorMsg.textContent = '请输入有效的邮箱地址';
        this.parentNode.insertBefore(errorMsg, this.nextSibling);
    } else {
        if(this.parentNode.contains(errorMsg)) {
            this.parentNode.removeChild(errorMsg);
        }
    }
});
</syntaxhighlight>

== 数学表示 ==
DOM树可以表示为有向无环图(DAG)：
<math>
G = (V, E) \quad \text{其中} \quad V \text{是节点集合}, E \text{是边集合}
</math>

== 总结 ==
DOM操作是前端开发的基础，掌握它可以：
* 动态更新页面内容
* 响应用户交互
* 创建丰富的Web应用
* 与其他Web API（如Fetch API）结合使用

通过合理使用DOM方法和注意性能优化，可以构建高效、交互性强的网页应用。

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端基础]]