初学者刚把 JavaScript 的变量、函数、事件这几座大山翻过去大概率会碰上同一个困惑东西我都会写但页面怎么还是死的按钮点击之后想改一段文字、换个背景色、把输入框变成不可用状态这些其实都落到同一个知识点上——DOM 操作。这一课讲的“修改内容 / 样式 / 属性”就是把你从“会写 JS”推到“能让页面动起来”的最关键一步。我见过不少人跳过基础直奔框架最后回来补 DOM 的课因为不管用什么框架最终落到浏览器里的依然是这些原生的节点操作。所以这篇文章我用实战视角把 DOM 操作里最常用的三个场景掰开揉碎改内容、改样式、改属性。从 API 差异到性能问题从完整案例到踩坑记录尽量把那些文档里不会写清楚的细节都翻出来。适合刚开始接触 DOM 的初学者也适合想系统整理知识的初中级开发者。1. 内容整体设计与思路拆解1.1 什么是 DOM为什么必须会操作它DOM全称 Document Object Model浏览器把 HTML 解析成一棵节点树结构。每个标签都是树里的一个节点每段文字、每个属性也都对应着节点信息。你写的 JavaScript 之所以能控制页面就是因为它可以在这棵树上任意穿梭找到某个节点、修改它、删除它甚至从零创建一棵新的分支插进去。我用一个经常提到的类比把浏览器打开页面看成搭乐高模型。HTML 是图纸CSS 是配色方案而 DOM 就是已经拼好的模型本身。你要做的是在不重拼整个模型的前提下把某个零件的颜色换掉或者把一块红色积木替换成蓝色积木。JavaScript 就是你的手DOM 操作就是“换零件、涂颜色、拆装组合”的整套动作。以前端学习来说DOM 操作是绝对绕不开的基础能力。页面交互本质上就两件事拿到用户的动作再根据动作去修改页面。用户的点击、输入属于事件部分的课程修改页面则几乎全部由 DOM 操作完成。你要让页面反馈用户的操作结果核心就是在操作 DOM。1.2 修改内容、样式、属性三件套的内在逻辑这一课标题把 DOM 操作归纳成修改内容、修改样式、修改属性三个方向我理解这其实是在帮你建立一套分类思维。修改内容管的是用户能看到的文字、结构。比如点击按钮后把标题从“Hello”改成“你好”或者在页面上动态追加一条通知。修改样式管的是外观呈现。背景色、字体大小、元素显隐都属于这一类。修改属性管的则是元素身上携带的“配置信息”。比如照片的 src 地址、输入框的 disabled 状态、自定义的>div classtodo-app input typetext idtodoInput placeholder输入待办内容 button idaddBtn添加/button ul idtodoList/ul /divJS 部分先拿到目标节点const input document.getElementById(todoInput) const addBtn document.getElementById(addBtn) const list document.getElementById(todoList)给添加按钮绑定事件addBtn.addEventListener(click, () { const text input.value.trim() if (!text) return addTodo(text) input.value })addTodo函数里面就集中体现了内容、样式、属性三种操作function addTodo(text) { const li document.createElement(li) li.textContent text li.classList.add(todo-item) li.setAttribute(data-status, pending) list.appendChild(li) }这里我用createElement创建了一个新节点textContent写入文字内容classList.add给这个新节点加样式类setAttribute写了一个自定义属性记录初始状态。之后点击切换完成状态时就可以通过这个>.todo-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; user-select: none; } .todo-item.completed { text-decoration: line-through; color: #999; background: #f5f5f5; }这个案例虽然简单但它覆盖了本课的大部分知识点创建节点、修改内容、改样式类、改自定义属性以及把它们协调起来完成一个真正的交互流程。3.2 用事件委托管理动态创建的元素上面生成的每个li都需要绑定点击事件吗如果数量少直接绑定没问题但如果列表有几百上千条每一条都单独绑定事件对性能就是不小的消耗而且每次新加一个li都得重新绑定一次代码写起来也啰嗦。这里用事件委托更合适。事件委托的原理是利用事件冒泡点击子元素时事件会一路冒泡到父元素。你只需要在父元素上绑一次事件然后判断当前点击的到底是谁。改造一下点击逻辑list.addEventListener(click, (event) { const target event.target if (target.classList.contains(todo-item)) { target.classList.toggle(completed) const status target.getAttribute(data-status) pending ? done : pending target.setAttribute(data-status, status) } })这样无论之后新增多少个li点击处理逻辑都能生效不需要再做额外的绑定操作。event.target拿到的是实际被点击的元素classList.contains用来确认点击的确实是一个待办项避免把空白区域或其它元素也算进去。强调一个细节给动态创建的元素绑定事件所有新手都摔过的跟头就是把绑定代码写在创建代码的同一轮循环里漏了绑定时机的问题。事件委托从根上规避了这个麻烦所以我推荐在“动态列表 点击交互”的组合里优先用事件委托。3.3 用 CSS 类切换业务状态上一节我用classList.toggle(completed)实现完成状态的切换这是“用类名管理样式”思想的典型体现。对比一下如果用element.style.textDecoration直接操作你需要同时维护文字颜色和背景色每次切换都要写两三行样式代码而且以后想调整完成态的外观就必须去改 JS。这对项目维护非常不友好。把“状态”和“外观”解耦是前端工程化的入门意识。JavaScript 只负责判断业务状态完成还是未完成。用什么样式去表现这个状态全部交给 CSS 去处理。这带来的直接好处是产品经理哪天说“把完成态改成加个删除线再加个对勾”你只需要改 CSSJS 代码一行都不用动。用>