您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

JavaScript-DOM 学习(含案例源码)

目录

1、DOM概念

1.1、DOM树

2、获取元素

2.1、如何获取页面元素

2.2、根据ID获取

2.3、根据标签名获取

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

 2.5、获取特殊元素

 3、事件基础

3.1、概述

3.2、事件三要素

3.3、执行事件的步骤

3.4、常见的鼠标事件

 4、操作元素

4.1、改变元素内容

4.2、innerText与innerHTML的区别

4.3、常见元素的属性操作

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

4.3.2、表单元素的属性操作

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

 4.4、样式属性操作

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

  4.4.2、案例:循环精灵图

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

 4.4.4、使用className修改样式属性

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

 4.4.6、操作元素总结

 4.5、排他思想

4.5.1、案例:百度换肤效果

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

4.6、自定义属性的操作

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

4.6.2、案例:Tab栏切换

 4.7、H5自定义属性

 5、节点操作

5.1、获取元素的方式

5.2、节点概述

 5.3、节点层次

5.3.1、父级节点

5.3.2、子节点

5.3.3、兄弟节点

 5.4、创建、添加节点

 5.5、案例:新浪下拉菜单

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

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

 5.8、复制节点(克隆节点)

 5.8.1、案例:动态生成表格

5.9、三种动态创建元素的区别

 6、DOM核心


1、DOM概念

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DPM接口,通过这些DOM接口可以改变网页的内容、结构和样式

1.1、DOM树

文档:一个页面就是一个文档,DOM中使用document表示

元素:页面中的所有标签都是元素,DOM中使用element表示

节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

注意:DOM把以上内容都看是对象

2、获取元素

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

2.1、如何获取页面元素

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

获取元素的方式:

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

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、根据标签名获取

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

  1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储的

  2. 想依次打印里面元素对象,可采用遍历的方式

  3. 如果页面中只要一个li 返回的还是伪数组的形式

  4. 如果页面中没有这个元素返回的空的伪数组的形式

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

 

 注意:

1、因为得到的是一个对象的集合,所以我们想要操作里面的元素就想要遍历

2、得到的元素对象是动态的(动态指元素里面的内容发生变化,下面的js是不需要改动的,内容一变化,得到的就是变化之后的效果)

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

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

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新增的方法获取

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">盒子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>

 3、返回指定选择器的所有元素的集合

document.querySelectorAll()
<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、执行事件的步骤

1、获取事件源    2、注册事件(绑定事件)   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、改变元素内容

element.innerText

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

element.innerHTML

起始位置到终止位置的全部内容,包括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>
        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、表单元素的属性操作

利用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(){
        // 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、样式属性操作

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

1、element.style  行内样式操作

2、element.className    类名样式操作

    <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自定义属性

自定义属性目的:

        为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。

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

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

H5新增了自定义属性: 

1、设置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 才开始支持

 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>

5.9、三种动态创建元素的区别

 

 6、DOM核心

 

 

 

 

 

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进