JavaScript+jQuery+ES6入门到放弃之DOM应用

## 前言

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

### 操作节点属性

#### 获取节点属性

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

[scode type="yellow" size="simple"]

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

[/scode]

#### 设置节点属性

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

**演示案例：**

```html
<body>
    <p>
        <img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中"
            title="logo">
    </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>
```

**案例执行效果:**

![演示效果](https://www.jbea.cn/usr/uploads/2022/09/3594623028.gif)

### 创建和插入节点

**创建节点:**

| 方法名称                        | 描述                                                                                                          |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| 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">
    </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">
                   </p>  
         * 此处能够克隆子元素
        */
    }
</script>
```

**案例演示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/2010376636.gif)

### 删除和替换节点

| 方法名称                             | 描述 (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">
    </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>
```

**案例演示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/855290524.gif)

## 获取元素位置

### offset属性和client属性

**offset概述：** offset指偏移，即这个元素在文档中占用的所有显示宽度

**常见属性：**

| 属性         | 描述                                                   |
| ------------ | ------------------------------------------------------ |
| offsetLeft   | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop    | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| offsetHeight | 返回元素的高度                                         |
| offsetWidth  | 返回元素的宽度                                         |

![图例说明](https://www.jbea.cn/usr/uploads/2022/09/3316426405.png)

**演示案例（此案例在：[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>

</html>
```

**案例展示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/1160213273.gif)

**client概述：** 用于获取指定元素的宽度与高度，与offsetHeight、offsetWidth功能一致，但是获取元素宽度与高度时，**不会考虑元素的边框大小**。

**常见属性：**

| 属性         | 描述               |
| ------------ | ------------------ |
| clientWidth  | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |

![图例说明](https://www.jbea.cn/usr/uploads/2022/09/1574279561.png)

### scroll属性

**概述：** scroll指滚动，用来描述网页整体与浏览器之间的关系。

**应用场景：** 在浏览网页时，浏览器的高度与宽度是固定的，但是在我们日常浏览的网页中，页面的高度往往大于浏览器的高度。如果我们需要获取用户在这个页面滚动的距离，则我们可以使用：scrollTop属性以及scrollLeft属性在获取。

**属性解释：**

| 属性         | 描述                                       |
| ------------ | ------------------------------------------ |
| scrollTop    | 返回匹配元素的滚动条的垂直位置             |
| scrollLeft   | 返回匹配元素的滚动条的水平位置             |
| scrollHeight | 在没有滚动条的情况下，返回元素内容的总高度 |
| scrollWidth  | 在没有滚动条的情况下，返回元素内容的总宽度 |

![图例说明](https://www.jbea.cn/usr/uploads/2022/09/682824905.png)

**语法：**

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

</div>
    <div id="goBank">
        返回顶部
    </div>
</body>

</html>
```

---

[scode type="blue" size="simple"]

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之面向对象](https://jbea.cn/archives/558.html)

[/scode]

## 前言

### 操作节点属性

#### 获取节点属性

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

**🎈经验分享：** 使用 `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">

**案例执行效果:**

![演示效果](https://www.jbea.cn/usr/uploads/2022/09/3594623028.gif)

### 创建和插入节点

**创建节点:**

**插入节点：**

**演示案例：**

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

**案例演示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/2010376636.gif)

### 删除和替换节点

**演示案例：**

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

**案例演示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/855290524.gif)

## 获取元素位置

### offset属性和client属性

**offset概述：** offset指偏移，即这个元素在文档中占用的所有显示宽度

**常见属性：**

![图例说明](https://www.jbea.cn/usr/uploads/2022/09/3316426405.png)

**演示案例（此案例在：[BOM操作-小球滚动案例](https://www.jbea.cn/archives/531.html)基础之上完成）：**

```html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

</html>
```

**案例展示效果：**

![案例演示效果](https://www.jbea.cn/usr/uploads/2022/09/1160213273.gif)