摘要在掌握了 JavaScript 的核心语法变量、函数、作用域等之后我们终于要进入前端开发的核心领域 ——DOM 操作。本章将带你从零开始深入理解 DOM 的本质掌握获取、修改、创建和删除网页元素的核心方法并通过实战案例让你亲手实现网页的动态交互效果真正体会到 JavaScript 驱动网页的魅力。标签JavaScript、前端开发、DOM 操作、网页交互、JS 入门一、本章学习目标 理解DOM文档对象模型的定义、树状结构及其与 HTML、JavaScript 的关系。掌握 5 种以上获取网页元素的核心 API如getElementById、querySelector。学会修改元素的内容、样式、属性实现网页的动态更新。能够创建、插入和删除 DOM 节点动态构建网页结构。完成一个实战案例制作一个可交互的待办事项列表Todo List。二、什么是 DOMDOM全称Document Object Model文档对象模型是浏览器提供的一套编程接口它将整个 HTML 文档解析成一个由对象构成的树状结构DOM 树。HTML 是骨架定义了网页的结构和内容。DOM 是接口提供了一套 API让 JavaScript 可以 “看见” 和 “操作” 这个结构。JavaScript 是肌肉通过调用 DOM API实现网页的动态变化和用户交互。当浏览器加载一个 HTML 文件时它会解析所有标签生成一个 DOM 树。每个 HTML 元素、属性、文本都是树上的一个 “节点”。JavaScript 正是通过操作这些节点来改变网页的外观和行为。三、获取网页元素找到你要操作的目标要操作网页元素第一步就是找到它。JavaScript 提供了多种方式来获取 DOM 元素以下是最常用的几种1. 通过 ID 获取最快、最精准document.getElementById(id)方法通过元素的id属性查找返回一个唯一的元素对象因为 ID 在页面中必须唯一。html预览div idappHello, DOM!/div script const app document.getElementById(app); console.log(app); // div idappHello, DOM!/div /script2. 通过选择器获取最灵活、推荐document.querySelector(selector)和document.querySelectorAll(selector)是现代前端开发中最常用的方法它们支持所有 CSS 选择器语法。querySelector返回匹配到的第一个元素。querySelectorAll返回匹配到的所有元素是一个类数组对象NodeList。html预览ul classlist liItem 1/li liItem 2/li liItem 3/li /ul script // 获取第一个 li 元素 const firstItem document.querySelector(.list li); // 获取所有 li 元素 const allItems document.querySelectorAll(.list li); console.log(allItems); // NodeList(3) [li, li, li] /script3. 其他常用方法document.getElementsByTagName(tag)通过标签名获取元素集合。document.getElementsByClassName(class)通过类名获取元素集合。 小贴士querySelector和querySelectorAll功能更强大性能也更优推荐优先使用。四、修改元素让网页 “动” 起来找到元素后我们就可以通过 JavaScript 修改它的内容、样式和属性了。1. 修改元素内容element.textContent修改元素的纯文本内容会自动转义 HTML 标签更安全。element.innerHTML修改元素的 HTML 内容可以解析并渲染 HTML 标签。html预览div idtitle/div script const title document.getElementById(title); // 修改纯文本 title.textContent 新的标题; // 修改 HTML 内容 title.innerHTML strong加粗的新标题/strong; /script2. 修改元素样式通过element.style对象可以直接修改元素的行内 CSS 样式。注意CSS 属性名在 JavaScript 中要使用驼峰命名法如backgroundColor对应 CSS 的background-color。html预览div idbox stylewidth: 100px; height: 100px; background: red;/div script const box document.getElementById(box); // 修改背景色和宽高 box.style.backgroundColor blue; box.style.width 200px; box.style.height 200px; /script3. 修改元素属性使用element.setAttribute(attr, value)和element.getAttribute(attr)来设置和获取元素的属性。html预览a idlink hrefhttps://www.example.com链接/a script const link document.getElementById(link); // 修改 href 属性 link.setAttribute(href, https://www.google.com); // 获取 href 属性值 console.log(link.getAttribute(href)); // https://www.google.com /script五、创建与删除节点动态构建网页除了修改现有元素我们还可以动态创建新元素并插入到 DOM 树中或者删除不需要的元素。1. 创建新元素使用document.createElement(tag)方法创建一个新的元素节点。javascript运行// 创建一个新的 div 元素 const newDiv document.createElement(div); newDiv.textContent 我是新创建的元素; newDiv.className new-box;2. 插入元素到 DOM 树创建好元素后需要将其插入到文档中才能显示出来。常用的插入方法有parent.appendChild(child)将子元素添加到父元素的最后一个子节点之后。parent.insertBefore(newChild, referenceChild)将新元素插入到参考元素之前。html预览ul idlist liItem 1/li /ul script const list document.getElementById(list); const newItem document.createElement(li); newItem.textContent Item 2; // 插入到列表末尾 list.appendChild(newItem); /script3. 删除元素使用element.remove()方法可以直接将元素从 DOM 树中移除。javascript运行const itemToRemove document.querySelector(li); itemToRemove.remove();六、实战案例待办事项列表Todo List现在我们将所学知识整合起来制作一个简单的待办事项列表。功能需求输入框输入任务点击 “添加” 按钮将任务添加到列表中。点击任务项可以将其标记为已完成划掉。点击 “删除” 按钮可以移除对应的任务。html预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleTodo List/title style .completed { text-decoration: line-through; color: #999; } .todo-item { display: flex; justify-content: space-between; margin: 5px 0; } /style /head body input typetext idtodoInput placeholder输入新任务 button idaddBtn添加/button ul idtodoList/ul script const input document.getElementById(todoInput); const addBtn document.getElementById(addBtn); const list document.getElementById(todoList); // 添加任务 addBtn.addEventListener(click, () { const taskText input.value.trim(); if (taskText) { // 创建任务项 const li document.createElement(li); li.className todo-item; li.innerHTML span${taskText}/span button classdelBtn删除/button ; // 插入到列表 list.appendChild(li); // 清空输入框 input.value ; } }); // 事件委托处理任务点击和删除 list.addEventListener(click, (e) { const target e.target; // 点击任务文本切换完成状态 if (target.tagName SPAN) { target.parentElement.classList.toggle(completed); } // 点击删除按钮移除任务 if (target.classList.contains(delBtn)) { target.parentElement.remove(); } }); /script /body /html 进阶提示在案例中我们使用了事件委托Event Delegation将事件监听器绑定在父元素ul上而不是每个li上。这样即使动态添加了新的任务项也能正常响应点击事件这是 DOM 操作中非常重要的优化技巧。七、通关小练习 编写代码获取页面中所有类名为article的元素并将它们的背景色改为#f0f0f0。创建一个新的p元素内容为 “这是一段新段落”并将其插入到页面中 ID 为container的元素内部的最前面。为页面中所有的a标签添加一个点击事件点击时弹出该链接的href属性值。八、本章总结 ✨本章我们完成了从 “纯 JavaScript 语法” 到 “浏览器交互” 的关键跨越核心知识点如下DOM 本质是浏览器提供的 API将 HTML 文档解析为可操作的对象树。获取元素优先使用querySelector和querySelectorAll它们灵活且强大。修改元素通过textContent、innerHTML、style和setAttribute等方法改变元素。动态操作使用createElement、appendChild、remove等方法创建和管理 DOM 节点。实战思维通过 Todo List 案例理解了事件委托等重要的前端开发模式。掌握了 DOM 基础你就已经具备了开发简单交互页面的能力。下一章我们将深入学习DOM 事件进阶探索更复杂的用户交互逻辑。下一章预告《JS 入门通关手册14DOM 事件进阶事件流、事件委托与自定义事件》