Loading...

前言

在上篇文章中我们讲解了节点与节点之间的关系，如何访问节点以及修改节点样式等操作，但是在实际开发中，这些操作远远不够，我们将会在这一篇文章中继续讲解DOM节点的操作：操作节点的属性、创建和插入节点、删除和替换节点。

操作节点属性

获取节点属性

语法：节点元素.getAttribute("属性名")

🎈经验分享： 使用 getAttribute()方法获取属性值时，如果属性不存在，则返回null

设置节点属性

语法：节点元素.setAttribute("属性名","属性值")

演示案例：

<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节点之前

演示案例：

<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) 用其他节点替换指定的子节点

演示案例：

<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操作-小球滚动案例基础之上完成）：

<!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 在没有滚动条的情况下，返回元素内容的总宽度

图例说明

图例说明

语法：

/*标准写法*/
document.documentElement.scrollTop
document.documentElement.scrollLeft

/*chrome浏览器*/
document.body.scrollTop
document.body.scrollLeft

/*兼容写法*/
var sTop = document.documentElement.scrollTop || document.body.scrollTop;

案例演示：

<!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>

▶️ 开始学习下一章: JavaScript+Jquery+ES6入门到放弃之面向对象

最后修改：2022 年 09 月 07 日
© 允许规范转载
都滑到这里了，不点赞再走！？