Loading... ## 前言 在上篇文章中我们讲解了节点与节点之间的关系，如何访问节点以及修改节点样式等操作，但是在实际开发中，这些操作远远不够，我们将会在这一篇文章中继续讲解DOM节点的操作：**操作节点的属性、创建和插入节点、删除和替换节点**。 ### 操作节点属性 #### 获取节点属性 **语法：**`节点元素.getAttribute("属性名")` <div class="tip inlineBlock warning simple"> **🎈经验分享：** 使用 `getAttribute()`方法获取属性值时，如果属性不存在，则返回null </div> #### 设置节点属性 **语法：**`节点元素.setAttribute("属性名","属性值")` **演示案例：** ```html <body> <p> <img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中" title="logo" style=""> </p> <p> <input type="button" onclick="getImgAttr()" value="获取图片属性"> <input type="button" onclick="changeImgSrc()" value="修改图片"> </p> <p id="showResult" class="showResult"> </p> </body> <script> //获取节点属性 function getImgAttr() { //获取id为logo的html元素 var img = document.getElementById("logo"); //获取图片路径 var src_info = img.getAttribute("src"); //获取图片替代文本 var alt_info = img.getAttribute("alt"); //将获取的数据输出到页面中 var result_area = document.getElementById("showResult"); result_area.innerHTML = `src:${src_info}<br> alt:${alt_info}`; } //修改节点属性 function changeImgSrc() { //获取id为logo的html元素 var img = document.getElementById("logo"); //修改图片路径 img.setAttribute("src", "https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png") } </script> ``` **案例执行效果:**  ### 创建和插入节点 **创建节点:** | 方法名称 | 描述 | | ------------------------------- | ------------------------------------------------------------------------------------------------------------- | | document.createElement(tagName) | 创建一个标签名为tagName的新元素节点 | | element.cloneNode( deep ) | 复制某个指定节点。参数deep为布尔类型。若为true，则同时复制当前节点的所有子节点。若为false，则仅复制当前节点。 | **插入节点：** | 方法方法 | 描述 | | ----------------------------- | -------------------------------- | | A.appendChild(B) | 把B节点追加至A的子节点列表的末尾 | | parentNode.insertBefore(A, B) | 把A节点插入到B节点之前 | **演示案例：** ```html <body> <p id="img-area"> <img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中" title="logo" style=""> </p> <p id="attr-area-ext"> <input type="button" onclick="createNewImg()" value="创建一个图片"> <input type="button" onclick="cloneImg()" value="克隆图片"> <input type="button" onclick="cloneContent()" value="克隆图片容器-p"> </p> </body> <script> //创建节点 function createNewImg() { //创建一个<img>节点 var img = document.createElement("img"); //给创建的节点添加属性 img.setAttribute("src", "https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569") img.setAttribute("width", "200"); //将创建的节点添加到指定区域 var img_area = document.getElementById("img-area"); img_area.appendChild(img); } //克隆节点 function cloneImg() { //获取需要克隆的元素并执行克隆操作 var cloneImg = document.getElementById("logo").cloneNode(false); //将创建的节点添加到指定区域 var img_area = document.getElementById("img-area"); img_area.appendChild(cloneImg); } //克隆节点（深度克隆演示） function cloneContent() { //克隆一个完整的p#img-area元素 var colneP = document.getElementById("img-area").cloneNode(false); console.log("浅克隆：" , colneP); //输出： <p id="img-area"></p> 此处并没有将其子元素（img）获取到 //使用深度克隆（其子元素也将会被克隆） colneP = document.getElementById("img-area").cloneNode(true); console.log("深克隆：" , colneP); /** 输出： <p id="img-area"> <img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中" title="logo" style=""> </p> * 此处能够克隆子元素 */ } </script> ``` **案例演示效果：**  ### 删除和替换节点 | 方法名称 | 描述 (node为父级节点) | | ------------------------------------ | -------------------------- | | node.removeChild( child ) | 删除指定的子节点 | | node.replaceChild(newChild,oldChild) | 用其他节点替换指定的子节点 | **演示案例：** ```html <body> <p id="img-area"> <img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中" title="logo" style=""> </p> <p> <input type="button" onclick="replaceImg()" value="替换新图片"> <input type="button" onclick="delImg()" value="删除图片"> </p> </body> <script> //节点替换 function replaceImg(){ //创建一个新节点 var newImg = document.createElement('img'); newImg.setAttribute("src","https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569") newImg.setAttribute("width","300") //获取需要被替换的原始节点 var oldImg = document.getElementById("logo"); //获取需要被替换的原始节点的父级节点 var oldImgParent = document.getElementById("img-area"); //执行替换 oldImgParent.replaceChild(newImg,oldImg); } //删除节点 function delImg() { //获取需要被删除的原始节点的父级节点 var imgParent = document.getElementById("img-area"); //获取需要被删除的原始节点 【注意：在执行节点替换后，由于替换的节点没有ID属性，所以此处获取的父节点下标签名为“img”的第一个子节点元素】 var img = imgParent.getElementsByTagName("img")[0] //执行删除 imgParent.removeChild(img); } </script> ``` **案例演示效果：**  ## 获取元素位置 ### offset属性和client属性 **offset概述：** offset指偏移，即这个元素在文档中占用的所有显示宽度 **常见属性：** | 属性 | 描述 | | ------------ | ------------------------------------------------------ | | offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 | | offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 | | offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 | | offsetHeight | 返回元素的高度 | | offsetWidth | 返回元素的宽度 |  **演示案例（此案例在：[BOM操作-小球滚动案例](https://www.jbea.cn/archives/531.html)基础之上完成）：** ```html <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <title>青鸟技术栈</title> <style> #ball { width: 100px; height: 100px; border: 5px solid #999; border-radius: 50%; position: absolute; left: 20px; top: 80px; line-height: 100px; text-align: center; font-size: 20px; font-weight: 900; box-shadow: 0px 0px 10px #999; } #showOffsetInfo { width: 500px; min-height: 60px; padding: 10px; border: 2px solid #999; margin: 0 auto; border-radius: 5px; } </style> <script> window.onload = function () { var node = document.getElementById("ball"); node.onclick = (function () { var left = 20; var time; return function () { var txt = this.innerText; if (txt == "开始") { time = setInterval(() => { left++; //固定调整左边距离 this.style.left = left + "px"; //随机调整顶部距离 this.style.top = (Math.random() * 100 + 120) + "px" //随机调整宽高 var widthAndHeight = Math.random() * 100 + 80; this.style.width = widthAndHeight + "px" this.style.height = widthAndHeight + "px" this.style.lineHeight = widthAndHeight + "px" //获取小球移动后的偏移量 var offsetLeft = this.offsetLeft; var offsetTop = this.offsetTop; var width = this.offsetWidth; var height = this.offsetHeight; var parent = this.offsetParent; //将获取的信息显示到页面中 var showPanle = document.getElementById("showOffsetInfo"); var showInfo = `距离左边距离：${offsetLeft} 距离顶边距离：${offsetTop} 元素宽度：${width} 元素高度：${height} 父级元素：${parent}`; showPanle.innerText = showInfo; }, 500); this.innerText = "停止" } else { clearInterval(time); this.innerText = "开始" } } })(); } </script> </head> <body> <p id="ball">开始</p> <div id="showOffsetInfo"></div> </body> </html> ``` **案例展示效果：**  **client概述：** 用于获取指定元素的宽度与高度，与offsetHeight、offsetWidth功能一致，但是获取元素宽度与高度时，**不会考虑元素的边框大小**。 **常见属性：** | 属性 | 描述 | | ------------ | ------------------ | | clientWidth | 返回元素的可见宽度 | | clientHeight | 返回元素的可见高度 |  ### scroll属性 **概述：** scroll指滚动，用来描述网页整体与浏览器之间的关系。 **应用场景：** 在浏览网页时，浏览器的高度与宽度是固定的，但是在我们日常浏览的网页中，页面的高度往往大于浏览器的高度。如果我们需要获取用户在这个页面滚动的距离，则我们可以使用：scrollTop属性以及scrollLeft属性在获取。 **属性解释：** | 属性 | 描述 | | ------------ | ------------------------------------------ | | scrollTop | 返回匹配元素的滚动条的垂直位置 | | scrollLeft | 返回匹配元素的滚动条的水平位置 | | scrollHeight | 在没有滚动条的情况下，返回元素内容的总高度 | | scrollWidth | 在没有滚动条的情况下，返回元素内容的总宽度 |  **语法：** ```javascript /*标准写法*/ document.documentElement.scrollTop document.documentElement.scrollLeft /*chrome浏览器*/ document.body.scrollTop document.body.scrollLeft /*兼容写法*/ var sTop = document.documentElement.scrollTop || document.body.scrollTop; ``` **案例演示：** ```html <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <title>青鸟技术栈</title> <style> * { margin: 0; padding: 0; } #box-content { min-height: 5600px; background-color: aliceblue; } #goBank { width: 44px; height: 50px; text-align: center; background-color: #1d9bce; color: #fff; border-radius: 8px; word-wrap: break-word; padding-top: 8px; border: 1px solid #318cc9; box-shadow: 0px 0px 14px 4px rgb(123 185 227 / 38%); display: none; } </style> <script> window.onload = function () { //获取返回顶部的元素 var goBank = document.getElementById("goBank"); //当窗体发生滚动时，则进入该方法 window.onscroll = function () { //获取滚动高度 var top = document.documentElement.scrollTop || document.body.scrollTop; //当滚动距离超过900的时候，则显示返回顶部按钮 if (top >= 900) { goBank.style.display = "block"; goBank.style.position = "fixed"; goBank.style.right = "0px" goBank.style.bottom = "50px" } else { goBank.style.display = "none"; } } //点击返回顶部按钮时，实现返回顶部操作 goBank.onclick = function () { var top = document.documentElement.scrollTop || document.body.scrollTop; //使用定时器，使回到顶部变缓 var time = setInterval(() => { top -= 80 document.documentElement.scrollTop = top; document.body.scrollTop = top; if (top <= 0) { clearInterval(time); } }, 1) } } </script> </head> <body> <!-- 模拟页面内容高于5600px --> <div id="box-content"> </div> <div id="goBank"> 返回顶部 </div> </body> </html> ``` --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之面向对象](https://jbea.cn/archives/558.html) </div> 最后修改：2022 年 09 月 07 日 © 允许规范转载 赞 6 都滑到这里了，不点赞再走！？
