DOM文档对象模型是前端开发的核心工具它把 HTML 页面解析成树形结构让我们能用 JavaScript 去查询、修改、增删页面元素实现无刷新的动态交互。今天我们就从节点获取、属性修改、增删节点三个方向一步步带你掌握 DOM 操作的核心逻辑。一、DOM 核心逻辑理解页面的 “树” 结构浏览器会把整个 HTML 文档解析成一棵节点树页面里的标签、文字、属性都是独立的节点。我们写 JS 代码本质就是在对这棵树进行增删改查。DOM 里最常用的三类节点元素节点就是 HTML 标签比如div、p、button是页面的骨架。文本节点标签里的文字内容比如p你好/p中的 “你好”。属性节点标签的属性比如div classbox idtest中的class和id。我们的所有操作都是围绕这三类节点展开的。二、DOM 节点获取精准找到你要操作的元素DOM 操作的第一步永远是获取节点—— 找不到元素后面的修改、新增都无从谈起。下面是前端最常用的 5 种获取方式我会按推荐程度排序。1. 实操代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM节点的获取/title /head body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p script // getElementsByTagName 通过标签名来获取元素节点 若有多个相同标签返回含有多个节点的类数组对象 const p1 document.getElementsByTagName(p); console.log(p1); console.log(p1[0]); console.log(p1[1]); // getElementsByClassName 通过class名来获取元素节点若有多个相同class返回含有多个节点的类数组对象 const p2 document.getElementsByClassName(pp); console.log(p2); console.log(p2[0]); console.log(p2[1]); console.log(p2[2]); // getElementById 通过id名来获取元素节点直接返回可操控的节点而不是由节点构成的数组对象 const p3 document.getElementById(p3); console.log(p3); // querySelector 通过CSS选择器获取节点返回第一个匹配上的节点 const p5 document.querySelector(.pp); console.log(p5); // querySelectorAll 通过CSS选择器获取节点返回NodeList对象包含所有匹配给定选择器的节点 const p4 document.querySelectorAll(.pp); console.log(p4); console.log(p4[0]); console.log(p4[1]); console.log(p4[2]); /script /body /html2. 核心区别与使用建议方法特点适用场景getElementById唯一 ID速度最快返回单个元素页面里有唯一标识的元素比如根容器、按钮getElementsByTagName/getElementsByClassName批量获取返回动态 HTMLCollection页面元素变化时集合会自动更新需要实时监听元素数量变化的场景querySelector/querySelectorAll支持所有 CSS 选择器类、ID、后代、属性选择器等返回静态 NodeList语法统一、稳定性高日常开发首选大部分场景都能用小贴士日常开发优先用querySelector和querySelectorAll写法更统一也更符合现代前端习惯。三、DOM 节点属性修改让页面 “动” 起来获取到节点后最常用的操作就是修改属性—— 比如改样式类、改链接地址、改图片路径这是实现页面样式和内容动态更新的核心。1. 实操代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM节点的属性修改/title /head body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p p classpp xx yy idp4我是段落4/p img src./img_src/logo.png alt图片加载失败 idimg1 script // 【实验一. 查看元素节点的属性并修改属性】 // 1.根据id获取节点 const p3 document.getElementById(p3); console.log(p3); // 2.查看元素节点的属性 console.log(p3旧class属性值为 ${p3.className}); console.log(p3旧id属性值为 ${p3.id}); // 3.修改节点的class属性 p3.className pp jj yy xx; console.log(p3新class属性值为 ${p3.className}); // 4.修改节点的id属性 p3.id _p_3; console.log(p3新id属性值为 ${p3.id}); // 【实验二. classList对象的操作】 // 根据id获取节点 const p4 document.getElementById(p4); console.log(p4.classList); console.log(p4.classList[0]); // 为classList添加一个新的class名 p4.classList.add(zz); console.log(p4.classList); // 为classList移除一个class名 p4.classList.remove(xx); console.log(p4.classList); // 检查classList中是否存在某个class名返回布尔值。 console.log(p4.classList.contains(jj)); // 不存在返回false console.log(p4.classList.contains(zz)); // 存在返回true // 【实验三. 其他属性的查看与修改以img标签为例】 const im document.getElementById(img1); console.log(修改前: im.src); // 修改src属性即修改资源路径因此渲染出来的图片会改变 im.src ./img_src/logo1.png; console.log(修改后: im.src); /script /body /html2. 核心知识点className会直接覆盖元素原有的所有class适合一次性重置样式。classList更灵活的类名操作 API支持add新增、remove删除、contains判断、toggle切换不会覆盖原有样式是日常修改样式的首选。原生资源属性像src、href、alt这类属性可以直接赋值修改浏览器会实时生效实现图片、链接的动态切换。四、DOM 节点创建、插入与删除动态渲染页面内容如果说 “查、改” 是对已有节点的操作那 “创建、插入、删除” 就是实现页面动态新增内容、删除内容的核心 —— 比如点击按钮添加一条评论、删除一条消息。1. 核心流程创建节点分别创建元素、文本、属性节点把结构、内容、属性分开组装。组装节点通过appendChild、setAttributeNode把子节点挂载到父元素上。渲染页面把组装好的完整元素插入到页面根节点比如body或某个容器页面会实时更新。删除节点通过父元素的removeChild方法删除指定子节点。2. 实操代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM节点的创建与插入/title /head body !-- 下面是随便写的一堆html元素节点 -- p classpp我是段落2/p p classpp idp3我是段落3/p p classpp jj yy xx idp4我是段落4/p script // 【第1步. 创建节点】 // 1.1 创建一个p元素节点 var ele document.createElement(p); // 1.2 创建一个文本节点 var txt document.createTextNode(我是用Javascript创建的新节点); console.log(txt); // 1.3 创建一个属性节点并为其赋值 var attr document.createAttribute(class); // 创建属性节点 attr.value hello world; // 为属性节点赋值 console.log(attr); // 【第2步. 插入节点】 // 2.1 将文本节点作为子节点加入新建的p元素节点下面 ele.appendChild(txt); // 2.2 将属性节点插入新建的p元素节点 ele.setAttributeNode(attr); // 2.3 将已经配置完毕的p元素节点以子节点的身份插入其上一层的body元素节点中 const body_node document.getElementsByTagName(body)[0]; body_node.appendChild(ele); // 【第3步.删除节点】 // 3.1 获取要删除的节点 const p3 document.getElementById(p3); // 3.2 删除节点 body_node.removeChild(p3); /script /body /html五、综合实例一个完整的待办事项小应用把上面的知识点串起来做一个简单的待办事项列表体验完整的 DOM 操作流程!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDOM 综合实例待办事项/title style .todo-item { padding: 8px; margin: 4px 0; border: 1px solid #eee; } .done { text-decoration: line-through; color: #888; } /style /head body h1我的待办事项/h1 input typetext idtodoInput placeholder输入新待办 button idaddTodo添加/button div idtodoList/div script const todoInput document.getElementById(todoInput); const addTodo document.getElementById(addTodo); const todoList document.getElementById(todoList); addTodo.addEventListener(click, () { const text todoInput.value.trim(); if (!text) return; // 1. 创建待办项 const todoItem document.createElement(div); todoItem.className todo-item; todoItem.textContent text; // 2. 点击标记完成/未完成 todoItem.addEventListener(click, () { todoItem.classList.toggle(done); }); // 3. 添加删除按钮 const delBtn document.createElement(button); delBtn.textContent 删除; delBtn.style.marginLeft 8px; delBtn.addEventListener(click, (e) { e.stopPropagation(); // 阻止事件冒泡 todoList.removeChild(todoItem); }); todoItem.appendChild(delBtn); // 4. 插入到列表 todoList.appendChild(todoItem); todoInput.value ; // 清空输入框 }); /script /body /html六、总结DOM 操作是前端开发的基础核心就是三件事获取节点用querySelector/querySelectorAll精准定位元素。修改属性用classList和直接赋值修改样式、内容、资源。增删节点创建 → 组装 → 插入 → 删除实现页面动态更新。掌握这三步你就能写出基本的交互页面为后续学习框架比如 Vue、React打下坚实基础。