Web API编程——DOM

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
        // 2.参数 id是大小写敏感的字符串，要加引号
        // 3.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 4.console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

2.3 根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的（网页的内容变化，得到的元素对象也会变化）

<body>
     <ul>
        <li>我没事就吃溜溜梅你别管我啦1</li>
        <li>我没事就吃溜溜梅你别管我啦2</li>
        <li>我没事就吃溜溜梅你别管我啦3</li>
        <li>我没事就吃溜溜梅你别管我啦4</li>
        <li>我没事就吃溜溜梅你别管我啦5</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要依次打印里面的元素对象可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>

<body>
    <ul>
        <li>我没事就吃溜溜梅你别管我啦1</li>
        <li>我没事就吃溜溜梅你别管我啦2</li>
        <li>我没事就吃溜溜梅你别管我啦3</li>
        <li>我没事就吃溜溜梅你别管我啦4</li>
        <li>我没事就吃溜溜梅你别管我啦5</li>
    </ul>
    <ul id="nav">
        <li>好好好</li>
        <li>好好好</li>
        <li>好好好</li>
        <li>好好好</li>
        <li>好好好</li>
    </ul>
    <script>
     
        // 3.element.getElementsByTagName() 可以得到这个元素里面的某些元素
        var nav = document.getElementById('nav');
        var lis = nav.getElementsByTagName('li');
        console.log(lis);
    </script>
</body>

2.4 通过HTML5新增的方法获取

1.document.getElementsByClassName('类名'); //根据类名返回元素对象集合

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1.getElementsByClassName('类名') 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

    </script>
</body>

2.document.querySelector('选择器');  //根据指定选择器返回第一个元素对象

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
       
        // 2.querySelector('选择器')返回指定选择器的第一个元素对象 切记里面的选择器需要加符号
        var firstBox = document.querySelector('.box');  //类选择器
        console.log(firstBox);
        var nav = document.querySelector('#nav');  //id选择器
        console.log(nav);
        var li = document.querySelector('li');  //标签选择器
        console.log(li);
    </script>
</body>

3.document.querySelectorAll('选择器');  //根据指定选择器返回

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        
        // 3.querySelectorAll('选择器') 返回指定选择器的所有元素
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

2.5 获取特殊元素（body、HTML）

获取body元素

document.body; //返回body元素对象

获取html元素

document.documentElemnt;  //返回html元素对象

<body>
    <script>
        // 1.获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);

        // 2.获取HTML元素
        var htmlElm = document.documentElement;
        console.log(htmlElm);
    </script>
</body>

3. 事件基础

3.1 事件概述

Javascript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

简单理解：触发---响应机制

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

<body>
    <button id="btn">点我</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1.事件是有三部分组成 事件源 事件类型 事件处理程序 称为事件三要素
        // （1）事件源 事件被触发的对象 谁 按钮
        var btn = document.getElementById('btn');
        // （2）事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 键盘按下
        // （3）事件处理程序 通过一个函数赋值的方式 
        btn.onclick = function () {
            alert('点点');
        }
    </script>
</body>

3.3 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div控制台输出：我被选中了
        // 1.获取事件源
        var div = document.querySelector('div');
        // 2.注册事件 绑定事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick = function () {
            console.log('我被选中了');
        }
    </script>
</body>

3.3 常见的鼠标事件

4. 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素里面的内容、属性等。注意以下都是属性

4.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但他去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p {
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var w = date.getDay();
            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期一五', '星期六'];
            var weekDay = week[w];
            return '今天是' + year + '年' + month + '月' + day + '日 ' + weekDay;

        }
        // 当我们点击了按钮，div里面的文字会发生变化
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function () {
            div.innerHTML= getDate();
        }

        // 元素也可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML= getDate();
    </script>
</body>

<body>
    <div></div>
    <script>
        // innerText和innerHtml的区别
        // 1.innerText不识别html标签 非标准 ie发起 老版本的火狐不支持
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong>4月19日';
    </script>
</body>

<body>
    <div></div>
    <script>
        // innerText和innerHTML的区别
        
        // 2.innerHTML 识别html标签 W3C标准
        div.innerHTML = '<strong>今天是：</strong>4月19日';
    </script>
</body>

<body>
    
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText和innerHTML的区别
        
        // innerText和innerHTML都是可读写的  可以获取元素里的内容 
        //所有属性都是可读写的
        // innerText去除空格和换行
        // innerHTML保留空格和换行
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

4.2 常用元素的属性操作

innerText、innerHTML改变元素内容
src、href
id、alt、title

方法：给元素的属性重新赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <!-- 需求：点刘德华就显示刘德华的图片 点张学友就显示张学友的图片 -->
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="./images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 1.获取事件源
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2.注册事件 处理程序
        ldh.onclick = function () {
            img.src = './images/ldh.jpg';
            img.title = '刘德华';
        }
        zxy.onclick = function () {
            img.src = './images/zxy.jpg';
            img.title = '张学友';
        }
    </script>
</body>

</html>

案例：分时显示不同图片，显示不同问候语

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="./images/s.gif" alt="">
    <div>亲亲，上午好</div>

    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var hour = date.getHours();
        if (hour < 12) {
            img.src = './images/s.gif';
            div.innerHTML = '亲亲，上午好';
        } else if (hour < 18) {
            img.src = './images/x.gif';
            div.innerHTML = '亲亲，下午好';
        } else {
            img.src = './images/w.gif';
            div.innerHTML = '亲亲，晚上好';
        }
    </script>
</body>

</html>

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function () {
            // innerHTML是修改普通盒子的内容的方法 比如div标签
            // 表单里面的值是通过value修改的
            input.value = '被点击了';

        }
    </script>

</body>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.onclick = function () {
            // innerHTML是修改普通盒子的内容的方法 比如div标签
            // 表单里面的值是通过value修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 用disabled
            //btn.disabled = true;
            this.disabled = true; //this指向的是事件函数的调用者 btn

        }
    </script>

</body>

案例：仿京东显示密码

<style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: none;
            outline: none;
        }

        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>


<body>
    <div class="box">
        <label>
            <img src="../images/close.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0; //如果被多次点击可以设置一个标志位flag
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = 'text';
                this.src = '../images/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                this.src = '../images/close.png';
                flag = 0;
            }
        }

    </script>
</body>

4.4 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式

1.element.style  行内样式操作
2.element.className 类名样式操作

注意：

JS里面的样式采取驼峰命名法比如 fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function () {
            div.style.backgroundColor = 'purple';
            div.style.width = '250px';
        }
    </script>
</body>

案例：淘宝点击关闭二维码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="../images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        var box = document.querySelector('.box');
        var btn = document.querySelector('.close-btn');
        btn.onclick = function () {
            box.style.display = 'none';
        }

    </script>

</body>

</html>

案例：循环精灵图背景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(../images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        // 获取所有的li
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以44 就是每个li的背景y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

</body>

</html>

案例：显示隐藏文本框内容

首先表单需要两个新事件，获得焦点onfocus 失去焦点onblur
如果获取焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容（就是说如果表单里面的内容是“手机”，就把里面的内容清空，如果是别的内容，就不变）
如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

<body>
    <input type="text" value="手机">
    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            console.log('获得焦点');
        }

        input.onblur = function () {
            console.log('失去焦点');
        }
    </script>


</body>

 <style>
        input {
            color: #999;
        }
    </style>

<body>
    <input type="text" value="手机">
    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            // 属性都是可读写的 如果没有给它赋值，就是获取它的值
            if (this.value === '手机') {
                this.value = '';
            }
            // 获取焦点需要把文本框里的颜色变深
            this.style.color = '#333';
        }

        input.onblur = function () {
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里的颜色变浅
            this.style.color = '#999';
        }
    </script>


</body>

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .change {
            background-color: purple;
            width: 250px;
            font-size: 25px;
            color: #fff;
            margin-top: 100px;
        }
    </style>

<body>
    <div class="first">文本</div>
    <script>
        // 1.使用element.style 获得、修改元素样式  样式比较少或者功能简单的情况下使用
        var div = document.querySelector('div');
        div.onclick = function () {
            // this.style.backgroundColor = 'purple';
            // this.style.width = '250px';
            // this.style.fontSize = '25px';
            // this.style.color = '#fff';
            // this.style.marginTop = '100px';

            // 2.可以通过修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况下使用
            // 如果要保留原先的类名
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

案例：密码框格式提示错误信息

<style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(../images/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            background-image: url('../images/wrong.png');
            color: red;
        }

        .right {
            background-image: url('../images/right.png');
            color: green;
        }
    </style>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '密码不符合';
            } else {
                message.className = 'message right';
                message.innerHTML = '密码符合';
            }
        }
    </script>

</body>

案例：世纪佳缘

<style>
        input {
            color: #999;
            outline: none;
        }
    </style>

<body>
    <input type="text" value="请输入用户名">
    <script>
        var input = document.querySelector('input');
        input.onfocus = function () {
            if (this.value == '请输入用户名') {
                this.value = '';
            }
            this.style.borderColor = 'pink';
            this.style.color = '#333';
        }

        input.onblur = function () {
            if (this.value === '') {
                this.value = '请输入用户名';
            }
            this.style.borderColor = '#999';
            this.color = '#999';
        }

    </script>

案例：开关灯案例

<body>
    <button>关灯</button>
    <script>
        var button = document.querySelector('button');
        var bd = document.body;
        var flag = 0;
        button.onclick = function () {
            if (flag == 0) {
                bd.style.backgroundColor = '#000';
                button.innerHTML = '开灯';
                flag = 1;
            } else {
                bd.style.backgroundColor = '#fff';
                button.innerHTML = '关灯';
                flag = 0;
            }
        }
    </script>
</body>

4.5 排他思想

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

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

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组 里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                // (1)先把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // （3）然后才让当前的元素背景为pink
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

案例：百度换肤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(../images/1.jpg) no-repeat center top;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="../images/1.jpg"></li>
        <li><img src="../images/2.jpg"></li>
        <li><img src="../images/3.jpg"></li>
        <li><img src="../images/4.jpg"></li>
    </ul>

    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        var bd = document.body;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                bd.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

案例：表格隔行变色

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
       
    </script>
</body>

</html>

案例：表单全选取消全选案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>

    <script>
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick = function () {
            // this.checked获取到的是checkbox的状态 选中时true 没选中时是false
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }

        // 给tbody里所有的checkbox都设置点击事件
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                var flag = true;
                // 每次点击其中的一个checkbox时 循环遍历其他的checkbox有没有被选中
                for (var j = 0; j < j_tbs.length; j++) {
                    if (!j_tbs[j].checked) {
                        flag = false;
                        break; //退出整个循环
                    }
                }
                j_cbAll.checked = flag;
            }

        }
    </script>

</body>

</html>

4.6 自定义属性

1.获取属性值

element.属性获取属性值
element.getAttribute('属性');

区别：

element.属性获取内置属性值（元素本身自带的属性比如id class）
element.getAttribute('属性'); 主要获得自定义的属性（标准）程序员自定义的属性

<body>
    <!-- 这个index就是我们自定义的属性 -->
    <div id="demo" index="1"></div>
    <script>
        var div = document.getElementById('demo');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        // 通过getAttribute可以获取自定义的属性值
        console.log(div.getAttribute('index'));
    </script>
</body>

2. 设置属性值

element.属性 = '值'; 设置内置属性值
element.setAttribute('属性','值');

区别：

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

<body>
    <!-- 这个index就是我们自定义的属性 -->
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.getElementById('demo');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        // 通过getAttribute可以获取自定义的属性值
        console.log(div.getAttribute('index'));

        // 设置属性值
        div.id = 'text';
        // div.className = 'head';
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer');
    </script>
</body>

3. 移除属性

element.removeAttribute('属性');

案例：tab栏切换（重点案例）

注意：应该是单击哪个模块，就让它对应的内容显示出来，一开始把所有的条目都display:none;然后，选中谁，就给谁的条目添加display:block;的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 给每个li设置自定义属性index
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                // 1.选项卡 点击某一个 底色变红 文字变白 其他的不变 排他思想
                // 先干掉其他人
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 再设置自己
                this.className = 'current';
                var index = this.getAttribute('index');

                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }

                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

4.7 H5 自定义属性

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

自定义属性获取是通过getAttribute('属性') 获取

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

1. 设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如 <div data-index = '1'></div>

或者使用JS设置

element.setAttribute('data-index',2);

2.获取H5自定义属性

注意：dataset是一个集合里面存放了所有以data开头的自定义属性

<body>
    <div class=".box" data-time="20" data-list-name="andy">11</div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-time'));
        div.setAttribute('data-index', 1);

        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['time']);
        // 如果自定义属性里面有多个-连接的单词 我们获取的时候采取驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

5. 节点操作

5.1 为什么学节点操作

获取元素通常使用两种方式：

1.利用DOM提供的方法获取元素

document.getElementById();
document.getElementsByTagName();
document.querySelector等
逻辑性不强、繁琐

2.利用节点层次关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

5.2 节点概述

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

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

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

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

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

5.3 节点层级

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

1. 父级节点

node.parentNode

parentNode 属性可返回某个节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1.父节点
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('box');
        console.log(erweima.parentNode);
    </script>

</body>

2. 子节点

1.parentNode.childNodes (标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等

如果只想要获得里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i< ul.childNodes.length; i++) {
    if (ul.childNodes[i].nodeTyle ===1) {
        //ul.childNodes[i]是元素节点
        console.log(ul.childNodes[i]);
}
}

2. 子节点

2.parentNode.children(非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回（重点掌握）

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // var lis = document.querySelector('ul').querySelectorAll('li');
        // console.log(lis);

        var ul = document.querySelector('ul');
        // 获取到的是所有的子节点 包括元素节点 文本节点
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);

        // children获取所有的子元素节点
        console.log(ul.children);

    </script>
</body>

3.parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。同样也是包含所有的节点

4.parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null。同样也是包含所有的节点

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //1.firstChild 第一个子节点 不管是文本节点还是元素节点
        //两个返回的都是文本节点 因为第一个和最后一个子元素都是换行
        console.log(ol.firstChild); 
        console.log(ol.lastChild);
    </script>
</body>

5.parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null

6.parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null

注意：这两个方法有兼容性问题，IE9以上才支持

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
    
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
    </script>
</body>

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

解决方案：

如果想要第一个子元素节点，可以使用parentNode.children[0]

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        
        // 实际开发的写法，既没有兼容性问题有返回第一个和最后一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

案例：下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>

    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.children;
        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>
</body>

</html>

3. 兄弟节点

1.node.nextSibling

nextSibiling返回当前元素的下一个兄弟节点，找不到则返回null。同样也是包括所有节点

2.node.previousSibling

previousSibling返回当前元素的上一个兄弟节点，找不到则返回null，同样也是包括所有节点

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);

    </script>
</body>

3.node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null

4.node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null

注意：这两个方法有兼容性问题，IE9以上才支持

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');

        // nextElementSibling的得到的是下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);

    </script>
</body>

问：如何解决兼容性问题？

答：自己封装一个兼容性的函数

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

5.4 创建节点

document.createElement('tagName');

document.createElement()方法创建由tagName指定的HTML元素。因为这个元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

5.5 添加节点

1.node.appendChild(child);  //node父级 child子级

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1.创建节点
        var li = document.createElement('li');
        // 2.添加节点 在最后追加元素 类似于数组的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    </script>
</body>

2.node.insertBefore(child,指定元素);

node.insertBefore()方法将一个节点添加到父节点的指定子节点的前面，类似于css里面的before伪元素

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
     
        // 在123的前面添加元素
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    </script>
</body>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            /* 能否调整元素的尺寸 */
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
    </ul>

    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value === '') {
                alert('请输入内容');
            }
            else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

5.6 删除节点

node.removeChild(child)  //node 父节点 child 子节点

node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

</body>

案例：删除留言案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            /* 能否调整元素的尺寸 */
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
    </ul>

    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value === '') {
                alert('请输入内容');
            }
            else {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='#'>删除</a>";
                ul.insertBefore(li, ul.children[0]);

                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // 删掉a标签的父元素li  this.parentNode node是li的父元素ul
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

5.7 复制节点（克隆节点）

node.cloneNode()

node.cloneNode() 方法返回调用该方法节点的一个副本，也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点（只克隆标签不克隆内容）
如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点（复制标签和内容）

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        // node.cloneNode() 括号为空或者false 浅拷贝 只复制标签 不复制内容
        var lili = ul.children[0].cloneNode();
        ul.appendChild(lili);
    </script>
</body>

<body>
    <ul>
        <li>111</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        // node.cloneNode() 括号为true 深拷贝 复制标签 复制内容
      
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>