一、DOM 核心逻辑1DOM文档对象模型会将 HTML 文档解析为树形对象结构页面中所有的标签、文字、属性都是独立的节点。我们的 JS 代码本质就是对这些节点进行查询、修改、新增、删除操作实现页面无刷新动态变化。2DOM 最常用的三类节点元素节点HTML标签、文本节点标签内容、属性节点标签属性二、DOM 节点获取所有取值方式全覆盖1实操代码DOM 操作的第一步永远是获取节点。如果无法精准拿到页面元素所有修改、新增操作都无从谈起。这里汇总前端 5 种主流节点获取方式搭配实测代码!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 /html实现图2核心区别1.getElementById根据唯一ID获取速度最快直接返回单个元素无需遍历2.getElementsByTagName / getElementsByClassName批量获取返回动态HTMLCollection页面元素变化时集合会自动更新3.querySelector / querySelectorAll支持所有CSS选择器类、id、后代、属性选择器等返回静态NodeList语法统一、稳定性高三、DOM 节点属性修改class、id、src 精细化操作获取节点后最常用的操作就是修改节点属性。包括基础的 id、类名修改精细化的 class 类名增删切换以及图片、链接等资源属性修改是页面样式、内容动态更新的核心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核心知识1.className全覆盖修改类名会直接覆盖原有所有 class适合一次性重置样式2.classList精细化操作支持add新增、remove删除、contains判断、toggle切换不覆盖原有样式3.原生资源属性src、href、alt可直接赋值修改浏览器会实时生效实现图片、链接动态切换四、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 !-- 下面是随便写的一堆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 /html2核心流程1.创建节点分别创建元素、文本、属性节点分离结构、内容、属性2.组装节点通过appendChild、setAttributeNode将子节点挂载到父元素3.渲染页面将组装完成的完整元素插入页面根节点body页面实时更新4.删除节点通过父元素removeChild删除指定子节点五、实例代码!DOCTYPE html html langN head meta charsetUTF-8 title课堂练习节点的相关操作/title /head body !-- 原始两条hr -- hr idhr1 hr idhr2 script // 1. 将idhr1的第一条横线改为黑色 const hr1 document.getElementById(hr1); hr1.color black; // 2. 删除idhr2的第二条绿色横线 const hr2 document.getElementById(hr2); hr2.remove(); // 3. 创建蓝色、宽度250、idhr3的hr并添加到页面 const hr3 document.createElement(hr); hr3.id hr3; hr3.color blue; hr3.width 250; document.body.appendChild(hr3); /script /body /html
