玩转DOM：像玩乐高一样操作网页元素🎯 什么是DOM？想象一下，你在玩乐高积木。每个积木块就像网页上的一个元素（按钮

你以为前端只是写写样式？DOM操作才是让网页“活”起来的魔法！

🎯 什么是DOM？

想象一下，你在玩乐高积木。每个积木块就像网页上的一个元素（按钮、图片、文字等），而**DOM（文档对象模型）**就是这份乐高搭建说明书，告诉浏览器如何组织这些积木。

// 简单说：DOM是HTML的编程接口
// HTML是静态的代码，DOM是动态的对象树

🌳 DOM树：网页的家族图谱

每个网页都是一棵倒置的“家族树”：

<html> 是爷爷
<body> 是爸爸
<div>、<p> 是孩子们
文本和属性是孙辈们

<!-- 看这个简单的HTML -->
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <div id="app">
      <h1>欢迎！</h1>
      <button>点击我</button>
    </div>
  </body>
</html>

对应的DOM树是这样的：

graph TD
    A[Document] --> B[html]
    B --> C[head]
    B --> D[body]
    C --> E[title]
    E --> F[文本: '我的网站']
    D --> G[div#app]
    G --> H[h1]
    G --> I[button]
    H --> J[文本: '欢迎！']
    I --> K[文本: '点击我']

🛠️ DOM操作四板斧

1️⃣ 查找元素：找到你要操作的积木

// 方法一：按ID找（最精确）
const appDiv = document.getElementById('app');

// 方法二：按CSS选择器找（最常用）
const title = document.querySelector('h1');
const buttons = document.querySelectorAll('button');

// 方法三：按类名找
const items = document.getElementsByClassName('item');

// 方法四：按标签名找  
const divs = document.getElementsByTagName('div');

2️⃣ 修改内容：给积木换颜色

// 改文本
title.textContent = '你好，世界！';
title.innerHTML = '<span>你好</span>，世界！'; // 可以包含HTML

// 改样式
appDiv.style.backgroundColor = 'skyblue';
appDiv.style.fontSize = '20px';

// 改属性
const img = document.querySelector('img');
img.setAttribute('src', 'new-image.jpg');
img.alt = '新图片';

3️⃣ 增删元素：添加或移除积木

// 创建新元素
const newButton = document.createElement('button');
newButton.textContent = '我是新的！';

// 添加到页面
appDiv.appendChild(newButton); // 加在最后
appDiv.insertBefore(newButton, title); // 插在title前面

// 移除元素
appDiv.removeChild(title); // 移除标题
newButton.remove(); // 更简单的方法

4️⃣ 事件处理：让积木“活”起来

// 添加点击事件
newButton.addEventListener('click', function(event) {
  console.log('按钮被点了！');
  this.style.backgroundColor = 'red';
  
  // 事件冒泡：从内到外传递
  event.stopPropagation(); // 阻止冒泡
});

// 常见事件类型
// click - 点击
// mouseenter/mouseleave - 鼠标进出
// keydown/keyup - 键盘按下/松开
// submit - 表单提交
// load - 页面加载完成

🔄 DOM操作完整流程图

flowchart TD
    A[开始DOM操作] --> B{第一步：查找元素}
    B --> C[getElementById<br>最精确]
    B --> D[querySelector<br>最灵活]
    B --> E[其他选择器]
    
    C --> F{第二步：要做什么？}
    D --> F
    E --> F
    
    F --> G[修改内容/样式]
    F --> H[添加/删除元素]
    F --> I[添加事件监听]
    
    G --> J[更新界面]
    H --> J
    I --> K[用户交互]
    K --> J
    
    J --> L[完成！]

🚀 实战：创建动态待办清单

让我们用DOM操作做一个简单的待办事项应用：

<!DOCTYPE html>
<html>
<head>
    <style>
        .completed { text-decoration: line-through; color: gray; }
        li { margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <h2>我的待办清单</h2>
    <input id="todoInput" type="text" placeholder="输入新任务">
    <button id="addBtn">添加</button>
    <ul id="todoList"></ul>

    <script>
        const todoInput = document.getElementById('todoInput');
        const addBtn = document.getElementById('addBtn');
        const todoList = document.getElementById('todoList');
        
        // 添加任务
        addBtn.addEventListener('click', () => {
            const taskText = todoInput.value.trim();
            if (taskText) {
                addTodoItem(taskText);
                todoInput.value = ''; // 清空输入框
            }
        });
        
        // 按回车也可以添加
        todoInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') addBtn.click();
        });
        
        function addTodoItem(text) {
            // 创建列表项
            const li = document.createElement('li');
            li.textContent = text;
            
            // 点击标记完成/未完成
            li.addEventListener('click', function() {
                this.classList.toggle('completed');
            });
            
            // 添加删除按钮
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = '删除';
            deleteBtn.style.marginLeft = '10px';
            
            deleteBtn.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止触发li的点击事件
                this.parentElement.remove();
            });
            
            li.appendChild(deleteBtn);
            todoList.appendChild(li);
        }
        
        // 添加示例任务
        addTodoItem('学习DOM操作');
        addTodoItem('写博客文章');
        addTodoItem('喝杯咖啡休息一下');
    </script>
</body>
</html>

💡 性能小贴士

减少DOM操作次数：多次操作合并成一次

// 不好：操作了3次DOM
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.margin = '10px';

// 好：只操作1次
element.style.cssText = 'color: red; font-size: 20px; margin: 10px;';

使用文档片段：批量添加元素时

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `项目 ${i}`;
    fragment.appendChild(li);
}
list.appendChild(fragment); // 只触发一次重排

事件委托：减少事件监听器数量

// 不好：每个按钮都加监听器
buttons.forEach(btn => btn.addEventListener('click', handleClick));

// 好：父元素一个监听器搞定
container.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        handleClick(e.target);
    }
});

🎓 总结

DOM操作就像是给网页赋予生命的魔法：

查找是找到正确的积木
修改是调整积木的外观
增删是搭建或拆除结构
事件是让积木能响应用户

记住：DOM操作是昂贵的（性能角度），所以要聪明地使用它。就像真正的乐高大师，知道何时快速搭建，何时精心调整。

现在，去创造属于你的动态网页吧！ 🚀

动手挑战：用纯DOM操作创建一个简单的图片轮播组件。提示：你需要createElement、appendChild、setAttribute和事件监听器！