名称	描述
`getElementById()`	获取带有指定id的节点
`getElementsByTagName()`	获取带有指定标签名的节点集合
`querySelector()`	获取指定选择器或选择器组匹配的第一个节点
`querySelectorAll()`	获取指定选择器或选择器组匹配的所有节点集合

2.1、如何获取页面元素

DOM在实际开发中主要用来操作元素

获取元素的方式：

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

2.2、根据ID获取

使用document.getElementById('ID名')方法可以获取带有ID的元素对象

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

2.3、根据标签名获取

<body>
    <div>
        <ul>
            <li>软件设计师</li>
            <li>前端工程师</li>
            <li>软件测试</li>
        </ul>
    </div>
    <script>
        // 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
       var lis = document.getElementsByTagName('li');
       console.log(lis);
       console.log(lis[1]);

    //    想依次打印里面元素对象，可采用遍历的方式
    for (var i=0;i<lis.length;i++){
        console.log(lis[i]);
    }
    // 如果页面中只要一个li 返回的还是伪数组的形式
    // 如果页面中没有这个元素返回的空的伪数组的形式
    </script>
</body>

还可以获取某个元素（父元素）内部所有指定标签名的子元素

父元素必须是单个对象（必须指明是哪一个元素对象）,获取的时候不包括父元素自己

element.getElementsByTagName('标签名');

对应

ol.getElementsByTagName('li');

<body>
    <div>
        <ul>
            <li>软件设计师</li>
            <li>前端工程师</li>
            <li>软件测试</li>
        </ul>
        <ol>
            <li>唔西迪西</li>
            <li>天线宝宝</li>
            <li>懒洋洋</li>
        </ol>
    </div>
    <script>
    // 想只获取ol中的li
    // var ol =document.getElementsByTagName('ol');//输出伪数组[ol]
    // console.log(ol.getElementsByTagName('li'));
    // 会报错，不能让伪数组做为父元素，必须指明一个元素对象
    var ol =document.getElementsByTagName('ol');//输出伪数组[ol]
    console.log(ol[0].getElementsByTagName('li'));//指定第一个ol,输出才不报错
    </script>
</body>

另一种方法是直接为ol加标签名

<body>
    <div>
        <ul>
            <li>软件设计师</li>
            <li>前端工程师</li>
            <li>软件测试</li>
        </ul>
        <ol id="ol">
            <li>唔西迪西</li>
            <li>天线宝宝</li>
            <li>懒洋洋</li>
        </ol>
    </div>
    <script>
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

2.4、通过HTML5新增的方法获取

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

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div> 
    <script>
        // 1、getElementsByClassName 根据类名获取某些元素集合
         var boxs = document.getElementsByClassName('box');
         console.log(boxs);
         //2、querySelector 返回指定选择器的第一个元素对象
        //  返回第一个box属性
         var first = document.querySelector('.box');
         console.log(first);

        //  返回第一个nav标签
        var nav = document.querySelector('#nav');
        console.log(nav);

        // 返回第一li
        var li = document.querySelector('li');
        console.log(li);//首页
    </script>
</body>

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div> 
    <script>
        // 获得所有的box
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        // 获得所有的li
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>

2.5、获取特殊元素

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

    // 获取html元素
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

3、事件基础

3.1、概述

3.2、事件三要素

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

3.4、常见的鼠标事件

4、操作元素

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

4.1、改变元素内容

<!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>
        div,p{
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink ;
        }
    </style>
</head>
<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p></p>
    <script>
    //    当我们点击了按钮，div里面的文字会发生变化
    //   获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 注册事件
        btn.onclick = function(){
            // div.innerText = '2022-3-12';
            div.innerText = getDate();
        }

        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerText=getDate();
    </script>
</body>
</html>

4.2、innerText与innerHTML的区别

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2022';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2022';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

4.3、常见元素的属性操作

<body>
  <button id="yyqx">易烊千玺</button>
  <button id="czy">陈哲远</button>
  <img src="yyqx.jpg" alt="" title="易烊千玺">
  <!-- 修改元素 src -->
  <!-- 获取元素 -->
<script>
   var yyqx = document.getElementById('yyqx');
   var czy = document.getElementById('czy');
   var img = document.querySelector('img');
//    注册事件 处理程序
   czy.onclick = function(){
        img.src = 'czy.jpg';
        img.title = '陈哲远';
   }
   yyqx.onclick = function(){
       img.src = 'yyqx.jpg';
       img.title = '易烊千玺'
   }
</script>
</body>

4.3.1、案例：分时显示不同图片和问候语

<!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="s.gif" alt="">
  <div>早上好</div>
<script>
//  根据系统不同时间来判断，使用需要用到日期内置对象
// 利用多分支语句来设置不同的照片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同的问候语，修改元素内容

// 1、获取元素
     var img = document.querySelector('img');
     var div = document.querySelector('div');

    //  2、得到当前的小时数
    var date = new Date();
    var h = date.getHours();

    // 3、判断小时数改变图片和文字信息
    if(h<12){
        img.src = "s.gif";
        div.innerHTML = '早上好，开始代码人的一天啦！';
    }
    else if(h<18){
        img.src = 'x.gif';
        div.innerHTML = "下午好，敲完这段代码就可以干饭啦！";
    }
    else{
        img.src = 'w.gif';
        div.innerHTML = '晚上啦，收工啦，下班啦！！！'
    }
    
</script>
</body>
</html>

4.3.2、表单元素的属性操作

<body>
    <button>按钮</button>
    <input type="text" value="请输入内容">

<script>
    var btn  = document.querySelector('button');
    var input = document.querySelector('input');
    btn.onclick = function(){
        // input.innerHTML='我被点击了';   这个是普通盒子 比如div标签里面的内容

        //表单里面的值 文字内容是通过value来修改的
        input.value='我被点击了';
        // 若想要某个表单被禁用，不能再点击，则使用disabled ,如我想button被禁用
        // btn.disabled=true; 
        this.disabled=true; //跟上面的命令等同
        // this 指向的是事件函数的调用者 btn
    }
    
</script>

4.3.3、案例：仿京东显示密码

<!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>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 10px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>

<script>
    //1、获取元素
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');
    //2、绑定事件/注册事件  处理程序
    var flag =0;
    eye.onclick = function(){
        //点击一次之后，flag一定要变化
        if(flag==0){
            pwd.type = 'text';//pwd.type的属性由原来的password改为text
            eye.src='open.png';
            flag=1;
        }else{
            pwd.type='password';
            eye.src='close.png';
            flag=0;
        }
        
    }
    
</script>
</body>
</html>

4.4、样式属性操作

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

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

注意：

1、JS里面的样式采用驼峰命名法，比如 fontSize、backgroundColor

2、JS修改style样式操作，产生的是行内样式，CSS权重比较高

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

<!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>
        .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="tao.PNG" alt="">
       <i class="close-btn">×</i>
   </div>
<script>
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box');
    btn.onclick = function(){
        box.style.display = 'none'; //点击×实现隐藏效果
    }   
</script>
</body>
</html>

4.4.2、案例：循环精灵图

<!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>
        * {
            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(bg.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>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

</body>
</html>

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

 <style>
        input{
            color: #999;

        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        //注册事件 获得焦点事件 onfocus
        text.onfocus = function(){
            // console.log('得到焦点');
            if(this.value ==='手机'){
                this.value = '';
            }
            //获得焦点需要吧文本宽里面的文字颜色变黑
            this.style.color = '#333';
        }
        //注册事件 失去焦点事件 onblur
        text.onblur= function(){
            // console.log('失去焦点');
            if(this.value ===''){
                this.value = '手机';
            }
            //获得焦点需要吧文本宽里面的文字颜色变浅
            this.style.color = '#999';
        }
    </script>
</body>

4.4.4、使用className修改样式属性

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .change{
            background-color: orange;
            color: aliceblue;
            font-size: 25px;
            margin-top: 100px;
        }
     </style>
 </head>
 <body>
     <div></div>
 
 <script>
    var div = document.querySelector('div');
    //使用element。style 获得修改元素样式，若样式比较少或功能简单的情况下使用
    //  功能多建议使用className 
    div.onclick = function(){
        // this.style.backgroundColor = 'yellow';
        // this.style.width = '250px';
        this.className = 'change'
    }
 </script>

4.4.5、案例：密码框验证信息

    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong{
            color: red;
            background-image: url(wrong.png);
        }
        .right{
            color: green;
            background-image:url(right.png);
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" name="" class="ipt">
        <p class="message wrong">请输入6~16位密码</p>
    </div>

    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        ipt.onblur=function(){
            //根据表单里面值的长度 ipt.value.length
            if(this.value.length<6 || this.value.length >16){
                message.className = 'message wrong';
                message.innerHTML = '输入错误，请输入6~16位';
            }
            else{
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>

4.4.6、操作元素总结

4.5、排他思想

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

4.5.1、案例：百度换肤效果

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(bg1.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="bg1.jpg"></li>
        <li><img src="bg2.jpg"></li>
        <li><img src="bg3.jpg"></li>
        <li><img src="bg4.jpg"></li>
    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //循环注册事件
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick = function(){
                //this.src是我点击图片的路径
                // console.log(this.src);
                // 把这个路径this.src给body就可以了
                document.body.style.backgroundImage ='url(' + this.src +')';
            }
        }
    </script>
</body>
</html>

4.5.2、案例：购物车全选或取消

<!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>
        * {
          margin: 0;
          padding: 0;
        }
    
        table {
          border-collapse: collapse;
          border-spacing: 0;
          border: 1px solid #c0c0c0;
          width: 500px;
          margin: 100px auto;
          text-align: center;
        }
        th {
          background-color: #09c;
          font: bold 16px "微软雅黑";
          color: #fff;
          height: 50px;
        }
        td {
          border: 1px solid #d0d0d0;
          color: #404060;
          padding: 10px;
        }
        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>iPhone14</td>
                     <td>¥6888</td>
                 </tr>
                 <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPhone14</td>
                    <td>¥6888</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iPad2022</td>
                    <td>¥8888</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Apple Watch</td>
                    <td>¥6888</td>
                </tr>
             </tbody>


         </table>
     </div>

      <script>
        //   全选和取消全选的做法：
        // 让下面所有复选宽的checked属性（选中状态）跟随全选按钮即可
          //1、获取元素
          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>
    </body>
</html>

4.6、自定义属性的操作

4.6.1、获取、设置、移除属性值

<body>
    <div id="demo" index="1" class="nav"></div>

    <script>
        var div = document.querySelector('div');
        // 1、获取元素的属性值
        //  element.属性
        console.log(div.id);
        //element.getAttribute('属性') get得到获取 attribute属性是程序员自己添加的属性，称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));

        // 2、设置属性值
        //  element.属性='值'
        div.id = 'test';
        div.className = 'navs';
        //  element.setAttribute('属性','值'); 主要针对自定义属性
        div.setAttribute('index',2);
        div.setAttribute('class','footer');//class 特殊 这里写的就是class 不是className

        // 3、移除属性 removeAttribute（属性）
        div.removeAttribute('index');
    </script>
</body>

4.6.2、案例：Tab栏切换

<!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>
        .tab {
            margin: 0 auto;
            width: 800px;
            padding-top: 20px;
        }
        .tab_list {
            height: 50px;
            border-bottom: 1px solid red;
        }
        .tab_list ul {
            padding-left: 0px;
            height: 50px;
        }
        .tab li {
            display: inline-block;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            margin: 0;
        }
        .item {
            display: none;
        }
        .current {
            background-color: brown;
            color: white;
        }
    </style>

</head>
<body>
    
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li>商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</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">
            商品评价模块内容
        </div>
        <div class="item">
           手机社区模块内容
        </div>
        </div>
    </div>

    <script>
            // 选项卡，点击某一个模块，当前底色变红，其余不变（排他思想）修改类名的方式
            // 1、获取元素
            var tab_list = document.querySelector('.tab_list');
            var lis = tab_list.querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            //for循环绑定点击事件
            for(var i=0;i<lis.length;i++){
                // 开始给5个li设置索引号
                lis[i].setAttribute('index',i);
                lis[i].onclick = function(){
                    // 干掉所有人 其余的li清除 class这个类
                    for(var i=0;i<lis.length;i++){
                        lis[i].className='';
                    }
                    //留下我自己
                    this.className = 'current';
                    // 2、显示内容模块
                    var index = this.getAttribute('index');//先获得当前点击选项卡的索引值
                    // console.log(index);
                    //将其余的item ,div隐藏
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    //2.再显示对应index下的模块
                    items[index].style.display = 'block';
                }
            }
    </script>
</body>
</html>

4.7、H5自定义属性

5、节点操作

5.1、获取元素的方式

5.2、节点概述

5.3、节点层次

5.3.1、父级节点

5.3.2、子节点

5.3.3、兄弟节点

5.4、创建、添加节点

5.5、案例：新浪下拉菜单

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

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

        .nav {
            margin: 100px;
            border-top: 2px solid #ff8500;
        }

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

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

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

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

        .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>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li><a href="#">免费邮箱</a></li>
                <li><a href="#">VIP邮箱</a></li>
                <li><a href="#">企业邮箱</a></li>
                <li><a href="#">新浪邮箱客户端</a></li>
            </ul>
        </li>
        <li>
            <a href="#">网站导航</a>
        </li>
    </ul>

    <script>
        // 1.导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
        // 2.核心原理：当鼠标经过li里面的第二个孩子 ul显示，当鼠标离开，则ul隐藏

        // 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>
</body>
</body>
</html>

5.6、删除节点，删除留言案例

5.7、案例：发布和删除留言板

<!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>
        ul{
            margin-top: 50px;
        }
        li{
            width: 300px;
            padding: 5px;
            background-color: rgb(223, 221, 125);
            color: black;
            font-size: 14px;
            margin: 15px 0;
        }
        li a{
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">留言板.....</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{
            //    1、创建元素
            var li = document.createElement('li');
            // 先用li才能赋值
            li.innerHTML=text.value+"<a href ='javascript:;'>删除</a>";
            //     2、添加元素
            // ul.appendChild(li);
            // 最新的留言放在第一个
                ul.insertBefore(li,ul.children[0]);
                // 3、删除元素，删除当前的li 它的父亲
                var as = document.querySelectorAll('a');
                for(var i=0;i<as.length;i++){
                    as[i].onclick=function(){
                        // node.removeChild(child); 删除li 当前a所在的li this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>
</html>

5.8、复制节点（克隆节点）

5.8.1、案例：动态生成表格

<!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>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th{
            border: 1px solid #333;
        }
        thead tr{
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
    //    1、先准备好学生的数据
    var datas =[{
        name:'易烊千玺',
        subject:'JavaScript',
        score:100
    },
    {
        name:'王俊凯',
        subject:'JavaScript',
        score:98
    },
    {
        name:'王源',
        subject:'JavaScript',
        score:99
    }
];
// 2、往tbody里面创建行（跟数据有关的3个单元格）；有几个人（通过数组的长度）我们就创建几行
    var tbody = document.querySelector('tbody');
    for(var i=0; i<datas.length; i++){
        //创建trh行
        var tr=document.createElement('tr');
        tbody.appendChild(tr);
        // 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数  使用for 循环遍历对象
        for(var k in datas[i] ){//里面的for循环管 列 td
        // 创建单元格
        var td = document.createElement('td');
        // 创建单元格的同时，把对象里面的属性值datas[i][k]给td
        td.innerHTML=datas[i][k];
        tr.appendChild(td);
    }
    // 3、创建有删除2个字的单元格
    var td=document.createElement('td');
    td.innerHTML='<a href="javascript:;">删除</a>';
    tr.appendChild(td);
}
//4、删除操作
    var as = document.querySelectorAll('a');
    for(var i=0;i<as.length;i++){
        as[i].onclick=function(){
            // 点击a删除当前a所在的行（链接的爸爸的爸爸） node.removeChild(child)
            tbody.removeChild(this.parentNode.parentNode)
        }
    }
    </script>
</body>
</html>