JavaScript的DOM操作基础

DOM简介DOMDocument Object Model是浏览器将HTML或XML文档解析为树状结构的对象模型允许通过JavaScript动态修改页面内容、结构和样式。一、DOM节点的获取示例body p classpp我是段落1/p p classpp我是段落2/p p classpp idp3我是段落3/p /body示例结果:下面是获取的方法:一getElementsByTagName 通过标签名来获取元素节点注若有多个相同标签返回含有多个节点的类数组对象示例代码script const p1 document.getElementsByTagName(p); console.log(p1); console.log(p1[0]); console.log(p1[1]); /script二getElementsByClassName 通过class名来获取元素节点注若有多个相同class返回含有多个节点的类数组对象示例代码script const p2 document.getElementsByClassName(pp); console.log(p2); console.log(p2[0]); console.log(p2[1]); console.log(p2[2]); /script三getElementById 通过id名来获取元素节点注直接返回可操控的节点而不是由节点构成的数组对象示例代码script const p3 document.getElementById(p3); console.log(p3); /script四querySelector 通过CSS选择器获取节点返回第一个匹配上的节点示例代码script const p5 document.querySelector(.pp); /script五querySelectorAll 通过CSS选择器获取节点返回NodeList对象注包含所有匹配给定选择器的节点示例代码script const p4 document.querySelectorAll(.pp); console.log(p4); console.log(p4[0]); console.log(p4[1]); console.log(p4[2]); /script二、DOM节点的属性修改示例: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 /body示例结果:三种修改方法如下:(一)查看元素节点的属性并修改属性示例代码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}); /script(二) classList对象的操作示例代码script // 根据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 /script(三)classList对象的操作示例代码script // 以img标签为例 const im document.getElementById(img1); console.log(修改前: im.src); // 修改src属性即修改资源路径因此渲染出来的图片会改变 im.src ./img_src/logo1.png; console.log(修改后: im.src); /script三、DOM节点的创建与插入示例:body p classpp我是段落2/p p classpp idp3我是段落3/p p classpp jj yy xx idp4我是段落4/p /body(一)第一步:创建节点示例代码script //创建一个p元素节点 var ele document.createElement(p); // 创建一个文本节点 var txt document.createTextNode(我是用Javascript创建的新节点); console.log(txt); // 创建一个属性节点并为其赋值 var attr document.createAttribute(class); // 创建属性节点 attr.value hello world; // 为属性节点赋值 console.log(attr); /script(二)第二步:插入节点示例代码script // 将文本节点作为子节点加入新建的p元素节点下面 ele.appendChild(txt); // 将属性节点插入新建的p元素节点 ele.setAttributeNode(attr); // 将已经配置完毕的p元素节点以子节点的身份插入其上一层的body元素节点中 const body_node document.getElementsByTagName(body)[0]; body_node.appendChild(ele); /script(三)第三步:删除节点示例代码script //获取要删除的节点 const p3 document.getElementById(p3); //删除节点 body_node.removeChild(p3); /script总结批量操作 DOM 时建议使用DocumentFragment减少回流性能优化。避免频繁读写 DOM 样式属性可通过classList批量修改。以上是全部的内容我们下次见