零基础快速入门前端DOM 操作核心知识与实战解析（完整汇总版）(可用于备赛蓝桥杯Web应用开发)

DOMDocument Object Model文档对象模型是 JavaScript 操作 HTML 文档的桥梁它将网页转换为一棵 “树”每个 HTML 标签、属性、文本都是树上的节点。掌握 DOM 操作就能动态改变网页内容、样式和交互。本文结合实战代码从基础到进阶系统梳理 DOM 核心知识。一、DOM 元素获取找到要操作的 “节点”操作 DOM 的第一步是 “找到元素”常用方法如下方法描述示例querySelector()通过 CSS 选择器获取单个元素document.querySelector(.div1)getElementById()通过id获取单个元素document.getElementById(dd)querySelectorAll()通过 CSS 选择器获取所有元素document.querySelectorAll(div)代码示例var div1 document.querySelector(.div1); // 获取 class 为 div1 的第一个元素 var div2 document.querySelector(.div2);二、DOM 属性操作修改标签的 “固有属性” 与 “自定义属性”1. 固有属性操作HTML 标签的固有属性如id、src、href可通过元素.属性名直接修改。代码示例切换div1的id属性function div1Click() { if (div1.id dd) { div1.id dd2; // 直接修改 id 属性 } else { div1.id dd; } }2. 自定义属性操作除了固有属性还可给元素添加自定义属性如代码中的index存储数据常用方法方法描述示例setAttribute(name, value)设置自定义属性或修改固有属性div1.setAttribute(index, 0)getAttribute(name)获取属性值支持自定义 / 固有属性div1.getAttribute(index)代码示例给元素添加index属性并读取var div1 document.querySelector(.div1); div1.setAttribute(index, 0); // 设置自定义属性 function div1Click(tt) { var index tt.getAttribute(index); // 读取 index tt.classList.add(bg index); // 动态添加类名 }三、DOM 样式操作改变元素的 “外观”修改样式有两种常用方式style属性适合修改单个样式CSS 属性名需转 “驼峰命名”如font-size→fontSize。className/classList适合批量修改样式通过操作 CSS 类名实现。代码示例 1用style修改单个样式function div2Click() { div2.style.color red; // 修改文字颜色 div2.style.fontSize 25px; // 修改字体大小驼峰命名 div2.style.backgroundColor yellow; // 修改背景色 }代码示例 2用className批量添加类div2.className div22; // 给 div2 追加类名 div22注意空格代码示例 3用classList更灵活地操作类function div4Click() { div3.classList.add(div33); // 添加类 if (div3.className.includes(div333)) { div3.classList.remove(div333); // 移除类 } else { div3.classList.add(div333); // 切换类 } }四、DOM 事件处理让网页 “动起来”含三种绑定方式事件是用户与网页交互的核心本文代码展示了三种事件绑定方式各有特点1. 行内绑定直接在 HTML 标签中写onclick通过onclick函数名(this)绑定可传递this代表当前元素。div classdiv1 onclickdiv1Click(this)点击我/divfunction div1Click(tt) { // tt 就是点击的元素本身 var index tt.getAttribute(index); tt.classList.add(bg index); }2. 属性绑定通过元素.onclick 函数绑定最常用直接在 JS 中给元素的onclick属性赋值函数代码与 HTML 分离。var div3 document.querySelector(.div3); div3.onclick function() { console.log(div3 被点击了); // 这里的 this 指向 div3 本身 };3.addEventListener更灵活的事件监听支持绑定多个事件处理函数不会覆盖之前的绑定。var div4 document.querySelector(.div4); div4.setAttribute(index, 3); div4.addEventListener(click, function() { var index this.getAttribute(index); // this 指向 div4 this.classList.add(bg index); });五、this关键字谁调用就指向谁在 DOM 操作中this的指向核心规律是谁调用事件 / 函数this就指向谁。绑定方式this指向示例行内绑定传this当前点击的元素div1Click(this)中tt是元素属性绑定onclick当前调用的元素div3.onclick function(){...}中this是 div3addEventListener当前触发事件的元素div4.addEventListener(click, ...)中this是 div4代码示例this在属性绑定中的应用var div5 document.querySelector(.div5); div5.setAttribute(index, 4); div5.onclick function() { var index this.getAttribute(index); // this 指向 div5 this.classList.add(bg index); };六、DOM 核心知识汇总表操作类型方法 / 属性示例说明获取元素querySelector()document.querySelector(.div1)获取单个元素CSS 选择器getElementById()document.getElementById(dd)通过 id 获取元素querySelectorAll()document.querySelectorAll(div)获取所有匹配元素修改属性元素.属性名div1.id dd2修改标签固有属性自定义属性setAttribute()div1.setAttribute(index, 0)设置自定义属性getAttribute()div1.getAttribute(index)获取属性值支持自定义修改样式stylediv2.style.color red修改单个样式驼峰命名classNamediv2.className div22批量追加类名classListdiv3.classList.add(div33)灵活添加 / 移除类事件绑定行内绑定div onclickdiv1Click(this)HTML 中直接绑定传this属性绑定div3.onclick function(){...}JS 中绑定常用addEventListenerdiv4.addEventListener(click, ...)可绑定多个函数this指向事件绑定中this.getAttribute(index)指向调用事件的元素