目标：

能够说出排他操作的一般实现步骤

能够使用html5中的dataset方式操作自定义属性

能够根据提示完成百度换肤的案例

能够根据提示完成全选案例

能够根据提示完成tab栏切换案例

能够区分元素节点、文本节点、属性节点

能够获取指定元素的父元素

能够获取指定元素的所有子元素

能够说出childNodes和children的区别

能够使用createElement创建页面元素

能够使用removeChild()方法删除节点

能够完成动态生成表格案例

最后对DOM基础做出总结

1.1. 排他操作

1.1.1 排他思想

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

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

案例预览：
在这里插入图片描述

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

    <script>
        // 获取所有的btn
        var btns = document.getElementsByTagName('button');
        // 循环btn给每一个btn添加点击事件
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // 再次循环先把已有样式的btn样式去除
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = ''
                }
                // 再给当前这个btn添加样式
                this.style.backgroundColor = 'red'
            }
        }
    </script>

1.2 案例：百度换肤

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

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

    <script>
        // 获取所有的img和body
        var imgs = document.querySelectorAll('img');
        var body = document.body;
        // 循环给每个img添加点击事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // 点击img把src属性赋值给body的url
                body.style.background = 'url(' + this.src + ')'
            }
        }
    </script>

1.3 案例：表格隔行变色

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

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

    <script>
        // 鼠标记过tbody中的tr时每个tr变色，离开时还原
        // 获取元素
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 循环给每个tr绑定鼠标经过事件
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmousemove = function() {
                this.className = 'bg'
            }
            trs[i].onmouseout = function() {
                this.className = ''
            }
        }
    </script>

1.4 案例：全选反选

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

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

 <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>

1.5. 自定义属性操作

1.5.1 获取属性值

获取属性值

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

区别：

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

1.5.2. 设置属性值

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

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

区别：

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

1.5.3. 移除属性

element.removeAttribute(‘属性’);

1.5.4. 案例：tab栏切换

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

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

    <script>
        // 获取所有的li
        var headLis = document.querySelector('.header').querySelectorAll('li');
        var bgLis = document.querySelector('.bg-image').querySelectorAll('li');
        // 通过循环给每个li添加事件
        for (var i = 0; i < headLis.length; i++) {
            // 给每个背景图添加一个自定义属性
            headLis[i].setAttribute('index', i);
            headLis[i].onclick = function() {
                // 排他思想
                for (var i = 0; i < headLis.length; i++) {
                    headLis[i].className = '';
                }
                this.className = 'active';
                // 接收自定义属性
                var index = this.getAttribute('index');
                // 排他思想
                for (var i = 0; i < bgLis.length; i++) {
                    bgLis[i].style.display = 'none';
                }
                bgLis[index].style.display = 'block';
            }
        }
    </script>

1.5.5. H5自定义属性

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

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

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

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

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

<div data-index=“1”></div>

或者使用 JS 设置

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

2.获取H5自定义属性

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

1.6. 节点操作

1.6.1. 节点概述

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

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

在这里插入图片描述

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

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

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

1.6.2. 节点层级

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

1.6.3. 父级节点

在这里插入图片描述

1.6.4. 子节点

所有子节点

在这里插入图片描述

子元素节点

在这里插入图片描述

第1个子节点

在这里插入图片描述
最后1个子节点

在这里插入图片描述
第1个子元素节点

在这里插入图片描述

最后1个子元素节点

在这里插入图片描述

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

在这里插入图片描述

1.6.5. 案例：新浪下拉菜单

预览（略）
代码示例：

    <script>
        // 1. 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4个小li
        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    </script>

1.6.6. 兄弟节点

下一个兄弟节点

在这里插入图片描述

上一个兄弟节点

在这里插入图片描述

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

在这里插入图片描述

上一个兄弟元素节点（有兼容性问题）
在这里插入图片描述

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

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

1.6.7. 创建节点

在这里插入图片描述

1.6.8. 添加节点

在这里插入图片描述
示例：

  <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. 案例：简单版发布留言

在这里插入图片描述

<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.删除节点

在这里插入图片描述
注意：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.复制（克隆）节点

在这里插入图片描述
示例：

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

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

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

 <script>
        var data = [{
            id: 1,
            name: 'apple',
            paice: '1$'
        }, {
            id: 2,
            name: 'banana',
            paice: '2$'
        }, {
            id: 3,
            name: 'orange',
            paice: '3$'
        }];
        // 获取元素
        var tbody = document.querySelector('tbody');
        // 通过循环创建行，根据数组元素的长度
        for (var i = 0; i < data.length; i++) {
            //创建元素tr
            var tr = document.createElement('tr');
            // 添加行
            tbody.appendChild(tr);
            // 行里面创建单元格，数量取决于对象的属性个数，data[i]为对象
            for (var k in data[i]) {
                // 创建单元格
                var td = document.createElement('td');
                // 单元格填充数据（对象的遍历结果进行填充）
                td.innerHTML = data[i][k];
                // 追加单元格
                tr.appendChild(td);
            }
            // 创建删除按钮，
            // 如果直接在td后面添加删除按钮，会存在遍历给给个单元格，所以要单独创建
            var atd = document.createElement('td');
            atd.innerHTML = '<a href = "javascript:;">删除</a>';
            tr.appendChild(atd);
            // 获取a标签并添加点击删除事件
            var as = document.querySelectorAll('a');
            for (var j = 0; j < as.length; j++) {
                as[j].onclick = function() {
                    // 点击后移除a的父节点td,td的父节点tr(this.parentNode.parentNode)
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>

1.7 总结DOM基础

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

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

1.7.2. DOM的核心总结

在这里插入图片描述

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1.7.3. 创建

在这里插入图片描述

1.7.4. 增加

在这里插入图片描述

1.7.5. 删

在这里插入图片描述

1.7.6. 改

在这里插入图片描述

1.7.7. 查

在这里插入图片描述

1.7.8. 属性操作

在这里插入图片描述

1.7.9. 事件操作（重点）

在这里插入图片描述

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

目标：

1.1. 排他操作

1.1.1 排他思想

1.2 案例：百度换肤

1.3 案例：表格隔行变色

1.4 案例：全选反选

1.5. 自定义属性操作

1.5.1 获取属性值

1.5.2. 设置属性值

1.5.3. 移除属性

1.5.4. 案例：tab栏切换

1.5.5. H5自定义属性

2.获取H5自定义属性

1.6. 节点操作

1.6.1. 节点概述

1.6.2. 节点层级

1.6.3. 父级节点

1.6.4. 子节点

1.6.5. 案例：新浪下拉菜单

1.6.6. 兄弟节点

1.6.7. 创建节点

1.6.8. 添加节点

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

1.6.10.删除节点

1.6.11.复制（克隆）节点

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

1.7 总结DOM基础

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

1.7.2. DOM的核心总结

1.7.3. 创建

1.7.4. 增加

1.7.5. 删

1.7.6. 改

1.7.7. 查

1.7.8. 属性操作

1.7.9. 事件操作（重点）

Come on

猜你喜欢