玩转DOM：像玩乐高一样操作网页元素-程序员充电站

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

🎯 什么是DOM？

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

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

🌳 DOM树：网页的家族图谱

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

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

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

对应的DOM树是这样的：

🛠️ DOM操作四板斧

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

// 方法一：按ID找（最精确）constappDiv=document.getElementById('app');// 方法二：按CSS选择器找（最常用）consttitle=document.querySelector('h1');constbuttons=document.querySelectorAll('button');// 方法三：按类名找constitems=document.getElementsByClassName('item');// 方法四：按标签名找constdivs=document.getElementsByTagName('div');

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

// 改文本title.textContent='你好，世界！';title.innerHTML='<span>你好</span>，世界！';// 可以包含HTML// 改样式appDiv.style.backgroundColor='skyblue';appDiv.style.fontSize='20px';// 改属性constimg=document.querySelector('img');img.setAttribute('src','new-image.jpg');img.alt='新图片';

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

// 创建新元素constnewButton=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操作完整流程图

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

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

<!DOCTYPEhtml><html><head><style>.completed{text-decoration:line-through;color:gray;}li{margin:10px 0;cursor:pointer;}</style></head><body><h2>我的待办清单</h2><inputid="todoInput"type="text"placeholder="输入新任务"><buttonid="addBtn">添加</button><ulid="todoList"></ul><script>consttodoInput=document.getElementById('todoInput');constaddBtn=document.getElementById('addBtn');consttodoList=document.getElementById('todoList');// 添加任务addBtn.addEventListener('click',()=>{consttaskText=todoInput.value.trim();if(taskText){addTodoItem(taskText);todoInput.value='';// 清空输入框}});// 按回车也可以添加todoInput.addEventListener('keypress',(e)=>{if(e.key==='Enter')addBtn.click();});functionaddTodoItem(text){// 创建列表项constli=document.createElement('li');li.textContent=text;// 点击标记完成/未完成li.addEventListener('click',function(){this.classList.toggle('completed');});// 添加删除按钮constdeleteBtn=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次DOMelement.style.color='red';element.style.fontSize='20px';element.style.margin='10px';// 好：只操作1次element.style.cssText='color: red; font-size: 20px; margin: 10px;';

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

constfragment=document.createDocumentFragment();for(leti=0;i<100;i++){constli=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);}});