JavaScript的DOM操作基础
DOM简介：
DOM（Document Object Model）是浏览器将HTML或XML文档解析为树状结构的对象模型，允许通过JavaScript动态修改页面内容、结构和样式。
一、DOM节点的获取
示例：
<body> <p class="pp">我是段落1</p> <p class="pp">我是段落2</p> <p class="pp" id="p3">我是段落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 class="pp">我是段落1</p> <p class="pp">我是段落2</p> <p class="pp" id="p3">我是段落3</p> <p class="pp xx yy" id="p4">我是段落4</p> <img src="./img_src/logo.png" alt="图片加载失败" id="img1"> </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 class="pp">我是段落2</p> <p class="pp" id="p3">我是段落3</p> <p class="pp jj yy xx" id="p4">我是段落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批量修改。
以上是全部的内容，我们下次见！！！