零基础快速入门前端DOM 节点操作核心知识点及蓝桥杯 Web 应用开发考点解析(可用于备赛蓝桥杯Web应用开发)

DOM文档对象模型是 JavaScript 操作网页内容的核心接口而节点操作则是 DOM 编程的基础是蓝桥杯 Web 应用开发赛道的必考核心考点无论是动态交互效果、数据渲染还是功能实现都离不开节点的获取、增删、修改与遍历。一、DOM 节点基础认知与核心类型HTML 文档中的所有内容在 DOM 树中都以「节点」的形式存在。整个文档是一个文档节点每个 HTML 标签是元素节点标签内的文本是文本节点HTML 注释是注释节点节点之间形成父子、兄弟的层级关系。1.1 核心节点类型蓝桥杯高频辨析考点代码中提到的「换行、空格是文本节点」「注释节点」是新手最容易踩坑的点也是蓝桥杯选择题、实操题的高频细节考点。DOM 核心节点类型如下节点类型对应属性说明常见场景元素节点Node.ELEMENT_NODE(值为1)HTML 标签对应的节点如div、p是最常用的节点页面所有可见的标签元素文本节点Node.TEXT_NODE(值为3)标签内的文本内容包括换行、空格、缩进两个标签之间的换行、标签内的文字注释节点Node.COMMENT_NODE(值为8)HTML 注释内容即!-- 注释 --代码中的注释标记文档节点Node.DOCUMENT_NODE(值为9)整个文档对象即documentDOM 树的根节点1.2 核心辨析节点集合childNodes与children这是代码中重点演示的内容也是蓝桥杯必考的辨析点二者核心区别如下childNodes获取元素的所有子节点包括元素节点、文本节点、注释节点返回NodeList集合children获取元素的所有元素子节点仅包含HTML标签节点返回HTMLCollection集合1.3 代码实例节点类型与集合区分演示!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title节点类型与集合演示/title /head body div classfather div classchild1111/div div classchild2222/div div classcc1/div div classcc2/div div classchild3333/div div classchild4444/div !-- 这是注释节点 -- /div script const father document.querySelector(.father); // 1. 获取所有子节点包含文本、注释 console.log(所有子节点 childNodes, father.childNodes); // 2. 仅获取元素子节点 console.log(仅元素子节点 children, father.children); // 3. 查看节点类型 console.log(第一个节点类型换行文本节点, father.firstChild.nodeType); console.log(第一个元素节点类型, father.firstElementChild.nodeType); /script /body /html考点提示蓝桥杯实操题中若需要遍历子元素修改样式/内容必须使用children而非childNodes否则会获取到换行、注释等非元素节点导致代码报错或效果异常。二、DOM 节点获取核心API节点获取是所有DOM操作的前提代码中演示了父子、兄弟节点的全量获取方式分为基础选择器获取、层级关系获取两大类均为蓝桥杯必考内容。2.1 基础选择器获取最常用的节点获取方式支持CSS选择器精准定位目标元素querySelector(selector)获取匹配选择器的第一个元素节点querySelectorAll(selector)获取匹配选择器的所有元素节点返回NodeList集合2.2 层级关系获取父子/兄弟节点基于当前节点的相对位置获取关联节点是蓝桥杯动态交互题的高频考点核心API分为父子、兄弟两类。1父子节点获取API说明返回值类型注意事项考点parentElement获取当前节点的父元素节点单个元素节点仅返回元素节点无父节点返回nullfirstChild获取当前节点的第一个子节点单个节点可能返回文本/注释节点换行、空格firstElementChild获取当前节点的第一个元素子节点单个元素节点仅返回元素节点蓝桥杯实操首选lastChild获取当前节点的最后一个子节点单个节点可能返回文本/注释节点lastElementChild获取当前节点的最后一个元素子节点单个元素节点仅返回元素节点无兼容问题2兄弟节点获取API说明返回值类型注意事项考点nextElementSibling获取当前节点的下一个兄弟元素节点单个元素节点仅返回元素节点无则返回nullpreviousElementSibling获取当前节点的上一个兄弟元素节点单个元素节点仅返回元素节点无则返回nullnextSibling获取当前节点的下一个兄弟节点单个节点可能返回文本/注释节点不推荐实操使用previousSibling获取当前节点的上一个兄弟节点单个节点可能返回文本/注释节点不推荐实操使用2.3 节点获取API汇总表分类API核心作用蓝桥杯考点优先级基础选择器querySelector()精准获取单个元素⭐⭐⭐⭐⭐基础选择器querySelectorAll()获取匹配的所有元素⭐⭐⭐⭐⭐父子节点parentElement获取父元素节点⭐⭐⭐⭐父子节点children获取所有元素子节点⭐⭐⭐⭐⭐父子节点firstElementChild获取第一个元素子节点⭐⭐⭐⭐父子节点lastElementChild获取最后一个元素子节点⭐⭐⭐⭐兄弟节点nextElementSibling获取下一个兄弟元素⭐⭐⭐⭐兄弟节点previousElementSibling获取上一个兄弟元素⭐⭐⭐⭐2.4 代码实例层级节点获取完整演示!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title层级节点获取演示/title style .active { color: red; font-weight: bold; } /style /head body div classfather div classchild1111/div div classchild2222/div div classcc1目标元素/div div classcc2444/div div classchild3555/div div classchild4666/div /div script // 获取目标元素 const cc1 document.querySelector(.cc1); // 1. 获取父节点 const father cc1.parentElement; console.log(父元素, father); // 2. 通过父节点获取第一个子元素 const firstChild father.firstElementChild; console.log(第一个子元素, firstChild); firstChild.classList.add(active); // 3. 获取最后一个子元素 const lastChild father.lastElementChild; console.log(最后一个子元素, lastChild); // 4. 获取上一个兄弟元素 const prevSibling cc1.previousElementSibling; console.log(上一个兄弟元素, prevSibling); // 5. 获取下一个兄弟元素 const nextSibling cc1.nextElementSibling; console.log(下一个兄弟元素, nextSibling); nextSibling.style.color blue; /script /body /html三、DOM 节点的增删改操作蓝桥杯实操核心考点节点的创建、添加、删除、修改是动态网页的核心也是蓝桥杯Web赛道实操题的必考内容几乎所有功能题都需要用到相关API代码中演示了核心的创建、添加、删除操作下面进行系统梳理与拓展。3.1 节点创建创建新的元素节点是动态添加内容的前提核心方式有两种document.createElement(tagName)创建一个新的元素节点是W3C标准推荐的方式安全性高无XSS风险innerHTML通过HTML字符串直接创建节点写法简洁但存在XSS安全风险蓝桥杯实操中需谨慎使用3.2 节点添加将创建好的节点添加到DOM树中才能在页面中显示核心API如下API作用插入位置蓝桥杯考点优先级appendChild(node)将节点添加到父元素的子节点列表末尾父元素内部的最后⭐⭐⭐⭐⭐prepend(node)将节点添加到父元素的子节点列表开头父元素内部的最前⭐⭐⭐⭐⭐before(node)将节点添加到当前元素的前面当前元素的同级之前⭐⭐⭐⭐after(node)将节点添加到当前元素的后面当前元素的同级之后⭐⭐⭐⭐考点坑点提示同一个DOM节点在文档中是唯一的。代码中同时执行appendChild(child)和prepend(child)不会添加两个节点只会将节点从末尾移动到开头这是蓝桥杯高频易错点。若需要添加多个相同节点需使用cloneNode()克隆节点。3.3 节点删除移除页面中的节点核心API有两种API作用用法考点提示node.remove()直接删除当前节点child1.remove()写法简洁蓝桥杯实操首选无兼容问题parent.removeChild(node)通过父节点删除子节点father.removeChild(child1)传统写法需先获取父节点3.4 拓展操作节点替换与克隆蓝桥杯进阶考点常用于批量渲染、节点复制场景replaceChild(newNode, oldNode)用新节点替换旧节点cloneNode(deep)克隆节点deeptrue为深克隆克隆节点及所有子节点deepfalse为浅克隆仅克隆节点本身3.5 节点增删改API汇总表操作类型API核心作用必记参数/注意事项创建节点document.createElement()创建新的元素节点参数为标签名如div、li添加节点appendChild()父元素末尾添加节点参数为要添加的节点对象添加节点prepend()父元素开头添加节点参数为要添加的节点对象添加节点before()/after()同级前后添加节点参数为要添加的节点对象删除节点remove()直接删除当前节点无参数直接调用删除节点removeChild()通过父节点删除子节点参数为要删除的子节点替换节点replaceChild()新节点替换旧节点参数(新节点, 旧节点)克隆节点cloneNode()复制节点参数true深克隆false浅克隆3.6 代码实例节点增删改完整功能演示!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title节点增删改演示/title style .add, .remove { width: 200px; height: 40px; line-height: 40px; text-align: center; background-color: aqua; border-radius: 10px; color: #fff; margin: 10px; cursor: pointer; display: inline-block; } .father { margin: 20px; border: 1px solid #333; padding: 10px; } .father div { margin: 5px 0; padding: 5px; background-color: #f5f5f5; } /style /head body div classfather div classchild1111/div div classchild2222/div div classcc1/div div classcc2/div div classchild3333/div div classchild4444/div /div div classadd onclickaddChild()添加新节点/div div classremove onclickremoveFirstChild()删除第一个节点/div script const father document.querySelector(.father); const child1 document.querySelector(.child1); // 添加节点函数 function addChild() { // 1. 创建新节点 const newChild document.createElement(div); // 2. 设置节点内容与样式 newChild.innerHTML 新创建的节点; newChild.style.color red; // 3. 添加到父元素末尾若要添加到开头使用father.prepend(newChild) father.appendChild(newChild); } // 删除节点函数 function removeFirstChild() { // 获取第一个元素子节点 const firstChild father.firstElementChild; // 存在节点才执行删除避免报错 if (firstChild) { firstChild.remove(); } } /script /body /html四、蓝桥杯 Web 考点实战蓝桥杯 Web 应用开发赛道中DOM 节点操作是基础必考题常结合交互事件、样式修改、数据渲染出题核心考察「动态增删」「节点遍历」「层级联动」三大能力以下是3个高频考点的实战案例。4.1 考点1动态列表增删最高频实操题题目要求实现一个待办列表功能点击「添加」按钮将输入框内容作为新列表项添加到列表末尾点击列表项后的「删除」按钮删除对应的列表项输入框为空时不允许添加添加后清空输入框代码实现!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title蓝桥杯考点动态待办列表/title style .container { width: 400px; margin: 50px auto; } .input-box { display: flex; gap: 10px; margin-bottom: 20px; } #todoInput { flex: 1; height: 36px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px; } #addBtn { width: 80px; height: 36px; background-color: #2196f3; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .todo-list { list-style: none; padding: 0; margin: 0; } .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; } .delete-btn { background-color: #f44336; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; cursor: pointer; } /style /head body div classcontainer div classinput-box input typetext idtodoInput placeholder请输入待办事项 button idaddBtn添加/button /div ul classtodo-list idtodoList/ul /div script // 获取元素 const todoInput document.getElementById(todoInput); const addBtn document.getElementById(addBtn); const todoList document.getElementById(todoList); // 添加待办 addBtn.addEventListener(click, () { const content todoInput.value.trim(); // 非空校验 if (!content) return; // 1. 创建列表项节点 const li document.createElement(li); li.className todo-item; // 2. 设置内容 li.innerHTML span${content}/span button classdelete-btn删除/button ; // 3. 添加到列表 todoList.appendChild(li); // 4. 清空输入框 todoInput.value ; // 给删除按钮绑定事件 const deleteBtn li.querySelector(.delete-btn); deleteBtn.addEventListener(click, () { li.remove(); }); }); // 回车添加 todoInput.addEventListener(keyup, (e) { if (e.key Enter) { addBtn.click(); } }); /script /body /html考点解析本题考察了createElement节点创建、appendChild节点添加、remove节点删除、事件绑定是蓝桥杯Web赛道最经典的基础实操题分值占比高必须熟练掌握。4.2 考点2节点遍历与批量样式修改题目要求获取父容器下的所有子元素节点遍历所有子元素给奇数项设置红色背景偶数项设置蓝色背景给第三个子元素添加加粗字体样式代码实现!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title蓝桥杯考点节点遍历/title style .father { width: 300px; margin: 50px auto; } .father div { height: 40px; line-height: 40px; padding: 0 10px; margin: 5px 0; color: #fff; border-radius: 4px; } /style /head body div classfather div第1项/div div第2项/div div第3项/div div第4项/div div第5项/div div第6项/div /div script const father document.querySelector(.father); // 获取所有元素子节点考点必须用children不能用childNodes const children father.children; // 遍历节点 for (let i 0; i children.length; i) { const item children[i]; // 奇偶项设置背景 if (i % 2 0) { // 奇数项索引从0开始 item.style.backgroundColor #f44336; } else { // 偶数项 item.style.backgroundColor #2196f3; } // 第三个元素索引2加粗 if (i 2) { item.style.fontWeight bold; item.style.fontSize 18px; } } /script /body /html考点解析本题核心考察children属性的使用、节点遍历蓝桥杯常以此为基础结合数据渲染、表格隔行变色等场景出题重点注意children和childNodes的区别避免遍历到非元素节点。4.3 考点3父子兄弟节点联动交互题目要求点击任意子元素给该元素添加激活样式其余兄弟元素移除激活样式点击子元素时修改父元素的背景色点击子元素时获取其前后兄弟元素的内容并打印代码实现!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title蓝桥杯考点节点联动/title style .father { width: 400px; margin: 50px auto; padding: 20px; border: 2px solid #333; border-radius: 8px; transition: background-color 0.3s; } .item { height: 40px; line-height: 40px; padding: 0 10px; margin: 10px 0; background-color: #f5f5f5; border-radius: 4px; cursor: pointer; transition: all 0.3s; } .item.active { background-color: #ff9800; color: #fff; transform: translateX(10px); } /style /head body div classfather div classitem选项1/div div classitem选项2/div div classitem选项3/div div classitem选项4/div div classitem选项5/div /div script const father document.querySelector(.father); const items document.querySelectorAll(.item); // 给每个选项绑定点击事件 items.forEach(item { item.addEventListener(click, () { // 1. 兄弟元素联动移除所有激活样式给当前元素添加 items.forEach(i i.classList.remove(active)); item.classList.add(active); // 2. 父子联动修改父元素背景色 father.style.backgroundColor #fff3e0; // 3. 获取兄弟节点 const prev item.previousElementSibling; const next item.nextElementSibling; console.log(当前元素, item.textContent); console.log(上一个兄弟, prev ? prev.textContent : 无); console.log(下一个兄弟, next ? next.textContent : 无); }); }); /script /body /html考点解析本题考察了previousElementSibling、nextElementSibling兄弟节点获取parentElement父节点操作以及节点的样式修改是蓝桥杯交互类题目的高频考点常结合tab切换、选项卡等场景出题。五、总结本文结合示例代码系统梳理了DOM节点操作的全量核心知识点覆盖节点认知、获取、增删改全流程同时结合蓝桥杯Web应用开发赛道的高频考点进行实战演练核心总结如下基础认知明确元素节点、文本节点、注释节点的区别牢记childNodes与children的核心差异这是蓝桥杯选择题的高频考点。节点获取优先使用querySelector/querySelectorAll精准定位元素层级获取优先使用带Element的API如firstElementChild避免获取到非元素节点。增删改操作熟练掌握createElement创建、appendChild/prepend添加、remove删除三大核心API注意节点的唯一性避免出现只移动不添加的bug。蓝桥杯备考技巧重点练习「动态列表增删」「节点遍历」「层级联动」三大题型实操中优先使用标准API注意边界判断如删除前判断节点是否存在保证代码的健壮性。不常用操作:克隆节点