JavaScript DOM操作

JavaScript DOM操作

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

什么是DOM？

DOM是浏览器将HTML文档解析为树状结构的对象模型，每个HTML元素（如`

`、`

`）对应树中的一个节点。JavaScript通过DOM API操作这些节点，实现动态网页效果。

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

基本DOM操作

1. 选择元素

通过以下方法获取DOM节点：

// 通过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');

2. 修改内容与属性

// 修改文本内容
element.textContent = "新文本";

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

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

3. 样式操作

// 直接修改样式
element.style.color = 'red';
element.style.fontSize = '16px';

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

节点操作

创建与添加节点

// 创建新元素
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);

删除节点

const elementToRemove = document.querySelector('#old-item');
elementToRemove.parentNode.removeChild(elementToRemove);

// 现代简写
elementToRemove.remove();

事件处理

DOM事件允许响应用户交互：

// 添加点击事件
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}`);
    }
});

性能优化

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

• 使用`documentFragment`批量操作
• 避免在循环中直接操作DOM
• 对重复操作进行缓存

// 使用文档片段优化
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);

实际案例

动态表格生成

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));

表单验证

document.querySelector('#myForm').addEventListener('submit', (e) => {
    const email = document.querySelector('#email').value;
    if (!email.includes('@')) {
        e.preventDefault();
        alert('请输入有效的电子邮件地址');
    }
});

高级主题

虚拟DOM

现代框架（如React）使用虚拟DOM提高性能：

• 内存中维护轻量级DOM副本
• 通过diff算法找出最小变更
• 批量更新真实DOM

Shadow DOM

Web Components的核心技术，提供封装：

const host = document.querySelector('#host-element');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>p { color: blue; }</style>
                       <p>这段文字在Shadow DOM中</p>`;

总结

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

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