深入浅出DOM（2）----案例驱动知识点

r囧r小猫 2023-02-12 11:19 18阅读 0赞

### 目标： ###

> 能够说出排他操作的一般实现步骤
> 
> 能够使用html5中的dataset方式操作自定义属性
> 
> 能够根据提示完成百度换肤的案例
> 
> 能够根据提示完成全选案例
> 
> 能够根据提示完成tab栏切换案例
> 
> 能够区分元素节点、文本节点、属性节点
> 
> 能够获取指定元素的父元素
> 
> 能够获取指定元素的所有子元素
> 
> 能够说出childNodes和children的区别
> 
> 能够使用createElement创建页面元素
> 
> 能够使用removeChild()方法删除节点
> 
> 能够完成动态生成表格案例
> 
> 最后对DOM基础做出总结

## 1.1. 排他操作 ##

### 1.1.1 排他思想 ###

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1.  所有元素全部清除样式（干掉其他人）
2.  给当前元素设置样式 （留下我自己）
3.  注意顺序不能颠倒，首先干掉其他人，再设置自己

案例预览：  
![在这里插入图片描述][20200525212356621.gif]

代码示例（细节含注释）：

## 1.2 案例：百度换肤 ##

案例分析：  
① 这个案例练习的是给一组元素注册事件  
② 给4个小图片利用循环注册点击事件  
③ 当我们点击了这个图片，让我们页面背景改为当前的图片  
④ 核心算法： 把当前图片的src 路径取过来，给 body 做为背景即可

案例预览：  
![在这里插入图片描述][20200525213313480.gif]  
代码示例（细节含注释）：

## 1.3 案例：表格隔行变色 ##

案例分析：  
① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout  
② 核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色  
③ 注意： 第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

案例预览：  
![在这里插入图片描述][20200525213553429.gif]  
代码示例（细节含注释）：

## 1.4 案例：全选反选 ##

案例分析：  
① 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可  
② 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都  
要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。  
③ 可以设置一个变量，来控制全选是否选中

案例预览：  
![在这里插入图片描述][20200525214241380.gif]  
代码示例（细节含注释）：

## 1.5. 自定义属性操作 ##

### 1.5.1 获取属性值 ###

1.  **获取属性值**

*  element.属性 获取属性值。
 *  element.getAttribute(‘属性’);

1.  **区别：**

*  element.属性 获取内置属性值（元素本身自带的属性）
 *  element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性

### 1.5.2. 设置属性值 ###

1.  设置属性值 element.属性 = ‘值’ 设置内置属性值。

*  element.setAttribute(‘属性’, ‘值’);

1.  区别：

*  element.属性 设置内置属性值
 *  element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）

### 1.5.3. 移除属性 ###

*  element.removeAttribute(‘属性’);

### 1.5.4. 案例：tab栏切换 ###

案例分析：  
① Tab栏切换有2个大的模块  
② 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类  
名的方式  
③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。  
④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。  
⑤ 核心思路： 给上面的tab\_list 里面的所有小li 添加自定义属性，属性值从0开始编号。  
⑥ 当我们点击tab\_list 里面的某个小li，让tab\_con 里面对应序号的 内容显示，其余隐藏（排他  
思想）

案例预览：  
![在这里插入图片描述][20200525214810899.gif]  
代码示例（细节含注释）：

### 1.5.5. H5自定义属性 ###

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

1.  **设置H5自定义属性**  
    H5规定自定义属性data-开头做为属性名并且赋值。  
    比如 ：

或者使用 JS 设置

element.setAttribute(‘data-index’, 2)

### 2.获取H5自定义属性 ###

1.  兼容性获取： element.getAttribute(‘data-index’)；
2.  H5新增element.dataset.index 或者 element.dataset\[‘index’\]，ie 11 才开始支持；
3.  如果自定义属性命名过长如：data-index-cwen ，在用element.dataset获取时写为:element.dataset.indexCwen

## 1.6. 节点操作 ##

### 1.6.1. 节点概述 ###

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

*  元素节点 nodeType 为 1
 *  属性节点 nodeType 为 2
 *  文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

**我们在实际开发中，节点操作主要操作的是元素节点**

### 1.6.2. 节点层级 ###

利用 DOM 树可以把节点划分为不同的层级关系，常见的是**父子兄层级关系**。

### 1.6.3. 父级节点 ###

![在这里插入图片描述][2020052521520439.png]

### 1.6.4. 子节点 ###

**所有子节点**

![在这里插入图片描述][20200525215221172.png]

**子元素节点**

![在这里插入图片描述][2020052521524856.png]

**第1个子节点**

![在这里插入图片描述][2020052521531186.png]  
**最后1个子节点**

![在这里插入图片描述][20200525215327993.png]  
**第1个子元素节点**

![在这里插入图片描述][20200525215342234.png]

**最后1个子元素节点**

![在这里插入图片描述][20200525215354136.png]

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

![在这里插入图片描述][20200525215416845.png]

### 1.6.5. 案例：新浪下拉菜单 ###

预览（略）  
代码示例：

### 1.6.6. 兄弟节点 ###

**下一个兄弟节点**

![在这里插入图片描述][20200525215527811.png]

**上一个兄弟节点**

![在这里插入图片描述][2020052521554414.png]

**下一个兄弟元素节点（有兼容性问题）**

![在这里插入图片描述][20200525215605508.png]

**上一个兄弟元素节点（有兼容性问题）**  
![在这里插入图片描述][20200525215620139.png]  
![在这里插入图片描述][20200525215634707.png]

**注意**：可以封装函数来处理兼容性（不常用没必要）

### 1.6.7. 创建节点 ###

![在这里插入图片描述][20200525215843365.png]

### 1.6.8. 添加节点 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]  
示例：

<ul>
            <li>123</li>
        </ul>
        <script>
            // 1. 创建节点元素节点
            var li = document.createElement('li');
            // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
            var ul = document.querySelector('ul');
            ul.appendChild(li);
            // 3. 添加节点 node.insertBefore(child, 指定元素);
            var lili = document.createElement('li');
            ul.insertBefore(lili, ul.children[0]);
            // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
        </script>

### 1.6.9. 案例：简单版发布留言 ###

![在这里插入图片描述][20200525220009687.png]

<body>
        <textarea name="" id=""></textarea>
        <button>发布</button>
        <ul>
    
        </ul>
        <script>
            // 1. 获取元素
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            // 2. 注册事件
            btn.onclick = function() { 
                if (text.value == '') { 
                    alert('您没有输入内容');
                    return false;
                } else { 
                    // console.log(text.value);
                    // (1) 创建元素
                    var li = document.createElement('li');
                    // 先有li 才能赋值
                    li.innerHTML = text.value;
                    // (2) 添加元素
                    // ul.appendChild(li);
                    ul.insertBefore(li, ul.children[0]);
                }
            }
        </script>
    </body>

### 1.6.10.删除节点 ###

![在这里插入图片描述][20200527103116447.png]  
**注意**：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

示例：

<button>删除</button>
        <ul>
            <li>熊大</li>
            <li>熊二</li>
            <li>光头强</li>
        </ul>
        <script>
            // 1.获取元素
            var ul = document.querySelector('ul');
            var btn = document.querySelector('button');
            // 2. 删除元素 node.removeChild(child)
            // ul.removeChild(ul.children[0]);
            // 3. 点击按钮依次删除里面的孩子
            btn.onclick = function() { 
                if (ul.children.length == 0) { 
                    this.disabled = true;
                } else { 
                    ul.removeChild(ul.children[0]);
                }
            }
        </script>

### 1.6.11.复制（克隆）节点 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]  
示例：

<ul>
            <li>1111</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            var ul = document.querySelector('ul');
            // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
            // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
            var lili = ul.children[0].cloneNode(true);
            ul.appendChild(lili);
        </script>

### 综合–案例：动态生成表格 ###

1.  效果：  
    ![在这里插入图片描述][20200527103653282.gif]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]
2.  代码示例（细节含注释）：

### 1.7 总结DOM基础 ###

### 1.7.1 创建元素的三种方式及区别 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]  
**注意**：此处效率对比可以用时间戳的方式对结果进行比对（略）

### 1.7.2. DOM的核心总结 ###

![在这里插入图片描述][20200527104625373.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]  
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

### 1.7.3. 创建 ###

![在这里插入图片描述][20200527110411649.png]

### 1.7.4. 增加 ###

![在这里插入图片描述][20200527110425516.png]

### 1.7.5. 删 ###

![在这里插入图片描述][20200527110438121.png]

### 1.7.6. 改 ###

![在这里插入图片描述][20200527110450140.png]

### 1.7.7. 查 ###

![在这里插入图片描述][20200527110503797.png]

### 1.7.8. 属性操作 ###

![在这里插入图片描述][20200527110518563.png]

### 1.7.9. 事件操作（重点） ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]

# Come on #

[20200525212356621.gif]: https://img-blog.csdnimg.cn/20200525212356621.gif
[20200525213313480.gif]: https://img-blog.csdnimg.cn/20200525213313480.gif
[20200525213553429.gif]: https://img-blog.csdnimg.cn/20200525213553429.gif
[20200525214241380.gif]: https://img-blog.csdnimg.cn/20200525214241380.gif
[20200525214810899.gif]: https://img-blog.csdnimg.cn/20200525214810899.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200525215108223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[2020052521520439.png]: https://img-blog.csdnimg.cn/2020052521520439.png
[20200525215221172.png]: https://img-blog.csdnimg.cn/20200525215221172.png
[2020052521524856.png]: https://img-blog.csdnimg.cn/2020052521524856.png
[2020052521531186.png]: https://img-blog.csdnimg.cn/2020052521531186.png
[20200525215327993.png]: https://img-blog.csdnimg.cn/20200525215327993.png
[20200525215342234.png]: https://img-blog.csdnimg.cn/20200525215342234.png
[20200525215354136.png]: https://img-blog.csdnimg.cn/20200525215354136.png
[20200525215416845.png]: https://img-blog.csdnimg.cn/20200525215416845.png
[20200525215527811.png]: https://img-blog.csdnimg.cn/20200525215527811.png
[2020052521554414.png]: https://img-blog.csdnimg.cn/2020052521554414.png
[20200525215605508.png]: https://img-blog.csdnimg.cn/20200525215605508.png
[20200525215620139.png]: https://img-blog.csdnimg.cn/20200525215620139.png
[20200525215634707.png]: https://img-blog.csdnimg.cn/20200525215634707.png
[20200525215843365.png]: https://img-blog.csdnimg.cn/20200525215843365.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200525215900485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200525220009687.png]: https://img-blog.csdnimg.cn/20200525220009687.png
[20200527103116447.png]: https://img-blog.csdnimg.cn/20200527103116447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200527103353898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200527103653282.gif]: https://img-blog.csdnimg.cn/20200527103653282.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200527103733487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020052710432916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200527104625373.png]: https://img-blog.csdnimg.cn/20200527104625373.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200527110140760.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[20200527110411649.png]: https://img-blog.csdnimg.cn/20200527110411649.png
[20200527110425516.png]: https://img-blog.csdnimg.cn/20200527110425516.png
[20200527110438121.png]: https://img-blog.csdnimg.cn/20200527110438121.png
[20200527110450140.png]: https://img-blog.csdnimg.cn/20200527110450140.png
[20200527110503797.png]: https://img-blog.csdnimg.cn/20200527110503797.png
[20200527110518563.png]: https://img-blog.csdnimg.cn/20200527110518563.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200527110638640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70