DOM操作[编辑 | 编辑源代码]

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

DOM简介[编辑 | 编辑源代码]

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

DOM树的节点类型包括：

元素节点（如
、
）
文本节点（元素内的文本内容）
属性节点（如id、class）

基本DOM操作[编辑 | 编辑源代码]

查询DOM元素[编辑 | 编辑源代码]

常用方法：

document.getElementById(id)：通过ID获取元素
document.querySelector(selector)：通过CSS选择器获取第一个匹配元素
document.querySelectorAll(selector)：获取所有匹配元素

// 示例：查询元素
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); // 输出: 图片数量

修改元素内容[编辑 | 编辑源代码]

innerHTML：获取或设置元素的HTML内容
textContent：获取或设置元素的文本内容

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

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

修改元素属性和样式[编辑 | 编辑源代码]

setAttribute(name, value)：设置属性
style.property：直接修改样式

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

高级DOM操作[编辑 | 编辑源代码]

创建和插入节点[编辑 | 编辑源代码]

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

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

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

事件处理[编辑 | 编辑源代码]

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

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

性能优化[编辑 | 编辑源代码]

频繁的DOM操作会影响页面性能，建议：

使用documentFragment进行批量操作
避免在循环中直接操作DOM
对重复查询的元素进行缓存

// 使用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);

实际应用案例[编辑 | 编辑源代码]

动态表单验证：通过DOM操作实现实时表单验证

// 表单验证示例
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);
        }
    }
});

数学表示[编辑 | 编辑源代码]

DOM树可以表示为有向无环图(DAG)： $G = (V, E) 其中 V 是节点集合, E 是边集合$

总结[编辑 | 编辑源代码]

DOM操作是前端开发的基础，掌握它可以：

动态更新页面内容
响应用户交互
创建丰富的Web应用
与其他Web API（如Fetch API）结合使用

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