JavaScript学习笔记3-Web APIs（DOM）

API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, 而又无需访问源码,或理解内部工作机制的细节。
简单理解: API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。
现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框,直接使用alert(弹出’).

MDN详细 API：https://developer.mozilla.org/zh-CN/docs/Web/API
因为Web API很多，所以我们将这个阶段称为Web APIs

1.4 API 和 Web API 总结

1. API为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
2. Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
3. Web API一般都有输入和输出(函数的传参和返回值) , Web API很多都是方法(函数)
4.学习Web API可以结合前面学习内置对象方法的思路学习

二、DOM

2.1 什么是DOM

文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。
W3C已经定义了- -系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

2.2 DOM树

文档:一个页面就是一个文档, DOM中使用document表示
元素:页面中的所有标签都是元素, DOM中使用element表示
节点: 网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node表示

DOM把以上内容都看做是对象。

2.3 获取元素

1.如何获取页面元素

DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:

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

2.根据ID获取

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

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

3.根据标签名获取

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

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
如果页面中只有一个li 返回的还是伪数组的形式
如果页面中没有这个元素返回的是空的伪数组的形式

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

注意：

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

element.getElementsByTagName('标签名');

<body>
    <ul>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
        <li>知否知否</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <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]);
        }
        // 3.如果页面中只有一个li 返回的还是伪数组的形式
        // 4.如果页面中没有这个元素   返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名');  父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol');//[o1]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

4. 通过 HTML5 新增的方法获取

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

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

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

<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);
        //2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box #nav
        var firstBox = document.querySelector('.box')
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        //3.document.querySelectorAll('选择器'); 返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>
</body>

5.获取特殊元素

获取body元素和获取html元素

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

三、事件基础

3.1 事件概述

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

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

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

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 id="a">123</div>
    <script>
        //执行事件步骤
        //点击div 控制台输出 我被选中了
        //1.获取事件流
        var divEle = document.getElementById('a');
        //2.绑定事件 注册事件
        //divEle.onclick
        //3.添加事件处理函数
       divEle.onclick= function() {
           alert('我被选中了');
        }
    </script>
</body>

3.4 操作元素

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

1.改变元素的内容

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

element.innerText

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

  element.innerHTML

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        //innerText 和 innerHTML的区别
        //1.innerText  不识别HTML标签  非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是:</strong>2019';
        //2.innerHTML  识别HTML标签  W3C标准  保留空格和换行
        div.innerHTML = '<strong>今天是:</strong>2019';
        //这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        // console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

2.常用元素的属性操作

 <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="../images/ldh.jpg" alt="" title="刘德华">

    <script>
        //修改元素属性 src
        //1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件
        zxy.onclick = function () {
            img.src = '../images/zxy.jpg';
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = '../images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

⭐根据系统的不同时间显示不同的问候语

案例分析：

根据系统不同时间来判断,所以需要用到日期内对象
利用多分支语句来设置不同的图片
需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
需要一个div元素，显示不同问候语，修改元素内容即可

<!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>
        //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 = '../images/s.gif';
            div.innerHTML = '亲，上午好,好好写代码';
        } else if (h < 18){
            img.src = '../images/x.gif';
            div.innerHTML = '下午好呀';
        } else {
            img.src = '../images/w.gif';
            div.innerHTML = '晚上好，好好写代码';
        }

    </script>
</body>
</html>

3.表单元素的属性操作

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

type、value、checked、selected、disabled

<body>
    <button>按钮</button>
    <input type="text" value="输入内容" name="" id="">
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件 处理程序
        btn.onclick = function() {
            input.value = '被点击了';
            //如果想要某个表单被禁用，不能再点击 使用disabled
            // btn.disabled = true;
            this.disabled = true;
            // this指向的是事件函数的调用者 btn
        }
    </script>
</body>

⭐仿京东显示密码的案例

点击按钮将密码框切换为文本框，并且可以查看密码明文。

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点一次切换为文本框，再点一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就设置为密码框，flag设置为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: 400px;
            border-bottom:1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0px;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="../images/close.png" alt="" id="eye">
        </label>
        <input type="password" 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';
                eye.src = '../images/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = '../images/close.png';
                flag = 0;
            }
          
        }
    </script>
</body>
</html>

4.样式属性操作

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

element.style 行内样式操作

element.className 类名样式操作

注意：

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

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'purple';  //里面的属性采取驼峰命名法
            this.style.width = '300px';
        }
    </script>
</body>

通过style行内样式操作修改样式

⭐仿淘宝关闭二维码案例

分析：

核心思路：利用样式的显示和隐藏完成 , 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>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .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>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>

</html>

⭐循环精灵图背景案例

首先精灵图图片排列有规律的
核心思路:利用for循环修改精灵图片的背景位置background-position
剩下的就是考验你的数学功底了
让循环里面的i引号* 44就是每个图片的y坐标

<!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;
        }
        .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;
            list-style: none;
        }
    </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.获取元素
        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>

⭐显示隐藏文本框里面的内容

首先表单需要2个新事件,获得焦点onfocus失去焦点onblur
如果获得焦点，判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容

<!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>
        input {
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            // console.log('获得了焦点');
            if (this.value === '手机'){
                this.value = '';
            }
            //获得焦点需要把文本框里面的文字变黑
          this.style.color = '#333';
        }
        text.onblur = function () {
            // console.log('失去了焦点');
            if (this.value === ''){
                this.value === '手机';
            }
            this.style.color = '#999';
        }
    </script>
</body>
</html>

通过className类名样式操作修改样式

注意:

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

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

</html>

⭐密码框格式提示错误信息

用户如果离开密码框里面输入个数不是6~16 ,则提示错误信息 ,否则提示输入正确信息

首先判断的事件是表单失去焦点onblur
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入不是6到16位,则提示错误信息颜色为红色小图标变化
因为里面变化样式较多，我们采取className修改样式

<!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>
        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 {
            color: red;
            background-image: url(../images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(../images/right.png);
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>
</body>

</html>

5.操作元素小结

6.排他思想

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

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

⭐点击按钮按钮变为粉色，点击下一个按钮其他颜色清零，只有当前按钮颜色变粉

<!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>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1.获取所有按钮元素
        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 = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
    //2.首先先排除其他人，然后才设置自己的样式，这种清除其他人的思想称为我们的排他思想
</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;
        }
        
        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>
        //1.获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //2.循环注册事件
        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>

⭐表格隔行变色效果

这个案例我运行起来有点问题。。。。

案例分析：

用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
核心思路:鼠标经过tr行,当前的行变背景颜色，鼠标离开去掉当前的背景颜色
注意:第一行(thead里面的行)不需要变换颜色,因此我们获取的是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>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                  this.className = '.bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>

⭐⭐表单全选取消全选案例（这个案例很绕）

案例分析

全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
下面复选框需要全部选中，上面全选才能选中做法:
给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的
如果有一个没选中的,上面全选就不选中。

<!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>
       //1.全选和取消全选做法 ：  让下面所有复选框的checked属性（选中状态）跟随 全选按钮即可
       //获取元素
       var j_cbAll = document.getElementById('j_cbAll');
       var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
       //注册事件
       j_cbAll.onclick = function () {
           //this.checked 它可以得到当前复选框的选中状态  true选中 false 未选中
           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;
                   }
               }
               j_cbAll.checked = flag;
           }
       }
   </script>
</body>

</html>

7.自定义属性的操作

1.获取属性值

element.属性

<body>
    <div id="demo"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //(1)element.属性
        console.log(div.id);
    </script>
</body>

element.getAttribute('属性')；

<body>
    <div id="demo"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素的属性值
        //(1)element.属性
        console.log(div.id);
        //(2)element.getAttribute('属性');
        console.log(div.getAttribute('id'));
    </script>
</body>

区别：

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

2.设置属性值

element.属性值 = ‘值’

  div.id = 'test';

element.setAttribute('属性‘，’值‘)；

div.setAttribute('index','2');
div.setAttribute('class','footer');//class 特殊 这里面写的就是class，不是className

3.移除属性

 div.removeAttribute('属性');

⭐tab栏切换案例(重要案例)

Tab栏切换有2个大的模块
上的模块选项卡,点击某一个,当前这一个底色会是红色 ,其余不变(排他思想)修改类名的方式
下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
规律:下面的模块显示内容和上面的选项卡一一对应,相匹配。
核心思路:给上面的tab_ list 里面的所有小i添加自定义属性，属性值从0开始编号。
当我们点击tab_ list 里面的某个小i，让tab_ con 里面对应序号的内容显示
其余隐藏(排他思想)

<!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_info {
            padding: 20px 0 0 20px;
        }
        
        .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>
      //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');
            //干掉所有人，让其余的item 这些div隐藏
            for (var i = 0; i < items.length; i++){
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
          }
      }
  </script>
</body>

</html>

8. H5自定义属性

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

自定义属性可以通过getAttribute（‘属性’）获取。

但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。

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

或者使用JS设置

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

2.获取H5自定义属性

<body>
    <div getTime='20' data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        //自定义属性通过getAttribute属性获取
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time',20);
        console.log(div.getAttribute('data-index'));
        //h5新增的获取自定义属性的方法,只能获取data-开头的
        //dataset是一个集合，里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.time);
        console.log(div.dataset.index);
        //如果自定义属性里面有多个- 链接的单词，我们获取的时候采取驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

四、节点操作

4.1 为什么要学节点操作

4.2 节点概述

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

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

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

4.3 节点层级

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="box">
        <span class="erweima">x</span>
    </div>
    <script>
        //1.父节点 parentNode
        var erweima = document.querySelector('.erweima');
        var box = document.querySelector('.box');
        //得到的是离元素最近的父节点（亲爸爸）  如果找不到父节点就返回为空
        console.log(erweima.parentNode);
    </script>
</body>

2.子节点

1.parentNode.childNode(标准)

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

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

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

2.parentNode.children(非标准)

parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返
回( 这个是我们重点掌握的)。
虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用。

<script>
        //DOM提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        //1.子节点  childNodes 所有的子节点 包含元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        //2.children 获取所有的子元素节点  也是我们实际开发常用的
        console.log(ul.children);
    </script>

3.parentNode.firstChild 获取第一个子节点

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

4.parentNode.lastChild

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

5.parentNode.firstElementChild 有兼容性问题

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

6.parentNode.lastElementChild

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

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //1.firstchild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        //2.firstElementChild 获取第一个子元素节点
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        //3.实际开发中 既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length-1]);
    </script>
</body>

⭐下拉菜单

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

<!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>
       //1.获取元素
       var nav = document.querySelector('.nav');
       var lis = nav.children;
       //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>

</html>

3.兄弟节点

1.node.nextSibiling

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

2.node.previousSibling

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

3.node.nextElementSibling

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

4. node.previousElementSibling

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

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

问：如何解决兼容性问题？ ----- 自己封装一个兼容性的函数

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

4.4 创建和添加节点

1.创建节点

document.createElement('tagName')

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

2.添加节点

1.node.appendChild(child)

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

2.node.insertBefore(child,指定元素）

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

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

⭐简单版添加留言案例

案例分析：

核心思路:击按钮之后,就动态创建一一个li ,添加到ul里面。
创建li的同时,把文本域里面的值通过i.innerHTML赋值给li
如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore

<body>
    <textarea name="" id="" ></textarea>
    <button>发布</button>
    <ul>
        <!-- <li>123</li> -->
    </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;
            //2.添加元素
            // ul.appendChild(li);
            ul.insertBefore(li,ul.children[0]);
            }
        }
    </script>
</body>

3.删除节点

node.removeChild(child)

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

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>薛心妍</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
          //点击按钮依次删除里面的内容
        btn.onclick = function () {
            if (ul.children.length == 0){
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            } 
        }
    </script>
</body>

⭐删除留言案例

当我们把文本域里面的值赋值给li的时候,多添加一个删除的链接
需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的Ii
阻止链接跳转需要添加javascript:void(0);或者javascript;

<!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>
        li {
            width: 300px;
            height: 30px;
            background-color: pink;
        }
        li a {
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" ></textarea>
    <button>发布</button>
    <ul>
        <!-- <li>123</li> -->
    </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 (){
                    //删除的是li，当前a所在的li
                    ul.removeChild(this.parentNode);
                }
            }
            }
        }
    </script>
</body>
</html>

4.复制节点（克隆节点）

node.cloneNode()

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

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

⭐动态生成表格（重点案例）

1.因为里面的学生数据都是动态的,我们需要js动态生成。这里我们模拟数据,自己定义好
数据。数据我们采取对象形式存储。

2.所有的数据都是放到tbody里面的行里面。

3.因为行很多,我们需要循环创建多个行(对应多少人)

4.每个行里面又有很多单元格(对应里面的数据),我们还继续使用循环创建多个单元格,并且把数据存入里面(双重for循环)
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>
        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:90
        }, {
            name: '卫英络',
            subject: 'JavaScript',
            score:99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score:88
        }, {
            name: 'kkk',
            subject: 'JavaScript',
            score:0
        }
    ]
    //2.向tbody里面创建行(跟数据有关系的三个单元格)：有几个人（通过数组的长度）我们就创建几行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++){
        //创建tr行
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        //行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数  for遍历对象
        for(var k in datas[i]){//里面的for循环管到 td
            var td = document.createElement('td');
            //把对象里面的属性值给td
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        //3.创建有删除两个字的单元格
        var td = document.createElement('td');
        td.innerHTML = "<a href = 'javaScript:;'>删除</a>"
        tr.appendChild(td);
    }
    var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++){
            as[i].onclick = function(){
                //点击删除当前a所在的行（链接的爸爸的爸爸） node.removeChild(child)
               tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>
</html>

5.三种动态创建元素区别（经典面试题）

document. write ()
element . innerHTML
document. createElement ()

区别：

document.write是直接将内容写入页面的内容流,但是文档流执行完毕,它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接) , 结构稍微复杂
createElement()创建多个元素效率稍低一点点,但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 createElement 高。

五、DOM重点核心

文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言
( HTML或者XML )的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

对于JavaScript ,为了能够使JavaScript操作HTML , JavaScript就有了一套自己的dom编程接口。
对于HTML , dom使得html形成一棵dom树. 包含文档、元素、节点

我们获取过来的DOM元素是一个对象( object) , 所以称为文档对象模型

5.1 创建

document. write ()
element . innerHTML
document. createElement ()

5.2 增

appendChild
insertBefore

5.3 删

removeChild

5.4 改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

修改元素属性：src、href、title 等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled
修改元素样式：style、className

5.5 查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
H5提供的新方法：querySelector、querySelectorAll (提倡)
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

5.6 属性操作

主要针对于自定义属性

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性

5.7 事件操作

六、事件高级

6.1 注册事件

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

1. addEventListener 事件监听方式（IE9以上支持）

EventTarget.addEventListener(type,listener[, useCapture]

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上
当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数：

type:事件类型字符串，比如click,mouseover,注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

2.attachEvent事件监听方式（了解，实际开发中不常用）

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对象触
发指定的事件时,指定的回调函数就会被执行。
该方法接收两个参数:

eventNameWithOn :事件类型字符串,比如onclick、onmouseover , 这里要带on
callback :事件处理函数,目标触发事件时回调函数被调用

3. 注册事件兼容性解决方案

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

 function addEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) {
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
      } else {
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
 }

6.2 删除事件（解绑事件）

传统方式：

event.onclick = null;

1.removeEventListener删除事件方式

eventTarget.removeEventListener(type,listener[,useCapture]);

该方法接收三个参数：

type:事件类型字符串，比如click,mouseover,注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

2.detachEvent删除事件方式(IE9以下)

eventTarget.detachEvent(eventNameWithOn,callback);

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用

3.删除事件兼容性解决方案

 function removeEventListener(element, eventName, fn) {
      // 判断当前浏览器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
      } else {
        element['on' + eventName] = null;
 }

6.3 DOM事件流

事件流描述的是从页面这接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

事件冒泡: IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。

事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。

我们向水里面扔一块石头,首先它会有一一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。

DOM事件流代码验证

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
注意

JS代码中只能执行捕获或者冒泡其中的一个阶段。
onclick和attachEvent只能得到冒泡阶段。
addEventListener (type, listener[, useCapture] )第三个参数如果是true ,示在事件捕获阶段调用事件处理程序;如果是false (写默认就是false ) , 表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
有些事件是没有冒泡的，比如onblur、onfocus、 onmouseenter、 onmouseleave
事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。

<!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>
        .father {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: purple;
            text-align: center;
            line-height: 100px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick和attachEvent只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是true 那么则处于捕获阶段
        //document->html->body->father->son
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        },true);
         // 4. 冒泡阶段 如果addEventListener 第三个参数是false 或者省略 那么则处于捕获阶段
         //son->father->->body->html->document
         var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        },false);
        document.addEventListener('click', function () {
            alert('document');
        },false);
    </script>
</body>

</html>

6.4 事件对象

eventTarget.onclick = function(event) {
   // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
} 
eventTarget.addEventListener('click', function(event) {
   // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt  
})

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解：

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面
这个对象就是事件对象 event，它有很多属性和方法，比如
谁绑定了这个事件
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
键盘触发事件的话，会得到键盘的相关信息，如按了哪个键
这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去
当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象的兼容性方案

事件对象本身的获取存在兼容问题：

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找

e = e || window.event;

<body>
    <div>123</div>
    <script>
        //事件对象
        var div = document.querySelector('div');
        div.onclick = function (e) {
            console.log(e);
            e = e || window.event;//兼容性写法
               console.log(e);
        }
        // div.addEventListener('click', function () {
        //     console.log(event);
        // })

         //1.event就是一个事件对象  写到我们侦听函数里面 小括号里面当形参来看
            //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
            //3.事件对象  是  我们事件一系列数据的集合  跟事件相关的
            //比如鼠标点击里面包含了鼠标的相关信息，鼠标坐标啊，
            //如果是键盘事件里面就包含了键盘事件的信息  比如 判断用户按下了哪个键
            //4.这个事件对象我们可以自己命名  如 event  evt e
            //事件对象也有兼容性问题  ie678  通过  window.event 来获取事件对象
    </script>
</body>

1.事件对象的常见属性和方法

e.target和this的区别

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        //常见事件对象的属性和方法
        //1.e.target  返回的是触发事件的对象（元素）  this返回的是绑定（注册）事件的对象（元素）
        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            //我们给ul绑定了事件  那么this 就指向ul
            console.log(this);
            //e.target 指向我们点击的那个对象  谁触发了这个事件  我们点击的是li  e.target指向的就是li
            console.log(e.target);
        })
//了解跟this有个非常相似的属性  currentTarget
    </script>
</body>

解决兼容性问题的方法（了解）

 div.onclick = function(e){
            e = e || window.event;
            var target = e.target || e.srcElement;
            console.log(target);
        }

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>
</head>
<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        //常见事件对象的属性和方法
        //1.返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click',fn);
        div.addEventListener('mouseover',fn);
        div.addEventListener('mouseout',fn);
        function fn(){
            console.log(e.type);
        }
        //2.阻止默认行为  (事件)  让链接不跳转  或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })
        //3.传统的注册方式
        a.onclick = function (e) {
            // 普通浏览器  e.preventDefault();
            e.preventDefault();
            //低版本浏览器  ie678
            e.returnValue;
            //我们可以利用return false 也能阻止默认行为  没有兼容性问题
            //特定：retuen后面的代码不执行了，而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>
</html>

3.阻止冒泡的两种方式（面试常问）

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。
阻止事件冒泡

标准写法:利用事件对象里面的stopPropagation ()方法

 e.stopPropagation();

非标准写法: IE6-8利用事件对象cancelBubble属性

e.cancelBubble = true;

阻止事件冒泡的兼容性解决方案

 if (e && e.stopPropagation){
            e.stopPropagation();
        }else {
            window.event.cancelBubble = true;
        }

4.事件委托（代理、委派）

事件委托也称为事件代理,在jQuery里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

事件委托的作用
我们只操作了一次DOM ,提高了程序的性能。

<body>
    <ul>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
        <li>知否知否，点我应有弹框在手</li>
    </ul>
    <script>
        //事件委托的核心原理，给父节点添加侦听器   利用事件冒泡影响每一个子节点
        var ul= document.querySelector('ul');
        ul.onclick = function (e){
            alert('我是弹窗');
            e.target.style.backgroundColor = 'pink';
        }
    </script>
</body>

6.5 常见的鼠标事件

1.禁止鼠标右击菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

2.禁止鼠标选中( selectstart开始选中)

 document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })

3.鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象
MouseEvent和键盘事件对象KeyboardEvent。

 <script>
        //鼠标事件对象 MouseEvent
        document.addEventListener('click',function(e){
            //1.client 鼠标在可视区的X和Y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            //2.page  鼠标在页面文档的X和Y坐标
            console.log(e.pageX);
            console.log(e.pageY);
        })
    </script>

⭐跟随鼠标移动的天使

案例分析：

鼠标不断的移动,使用鼠标移动事件: mousemove
在页面中移动,给document注册事件
图片要移动距离,而且不占位置,我们使用绝对定位即可
核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的
top和left值就可以移动图片

 <style>
        img {
            position: absolute;

        }
    </style>
</head>
<body>
    <img src="../images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            //1.mousemove 只要鼠标移动，我们都会获得最新的鼠标坐标
            //把这个X和Y坐标作为图片的top和left值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x,'y坐标是' + y);
            //不要忘记给left 和 right 加上 px
            img.style.left = x + 'px';
            img.style.top = y + 'px';
        })
    </script>
</body>

4.常用键盘事件

事件除了鼠标触发，还可以使用键盘触发。

 <script>
        //常用的键盘事件
        //1.keyup  按键弹起的时候触发
        // document.onkeyup = function (){
        //     console.log('我弹起了');
        // }
        document.addEventListener('keyup',function (){
            console.log('我弹起了');
        })
        //2.keydown 按键按下的时候触发 
        document.addEventListener('keydown',function(){
            console.log('我按下了');
        })
        //3.keypress 按键按下的时候触发  不能识别功能键  如 ctrl  shift
        document.addEventListener('keypress',function(){
            console.log('我按下了');
        })
//三个事件的执行顺序   keydown -- keypress  --  keyup
    </script>

如果使用addEventListener不需要加on
onkeypress和前面2个的区别是,它不识别功能键,比如左右箭头, shift等。
三个事件的执行顺序是: keydown-- keypress --- keyup

5.键盘事件对象

注意: onkeydown和onkeyup不区分字母大小写, onkeypress 区分字母大小写。
在我们实际开发中,我们更多的使用keydown和keyup，它能识别所有的键(包括功能键)
Keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值

⭐模拟京东按键输入内容

当我们按下s键，光标就定位到搜索框

案例分析：

核心思路:检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点:使用js里面的focus0方法

<body>
    <input type="text" >
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(e){
            if (e.keyCode === 83){
                search.focus();
            }
        })
    </script>
</body>

⭐模拟京东快递单号查询

要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。

案例分析：

快递单号输入内容时，上面的大号字体盒子 ( con )示(这里面的字号更大)
表单检测用户输入:给表单添加键盘事件
同时把快递单号里面的值( value )获取过来赋值给con子( innerText )做为内容
如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中。
keyup事件触发的时候，文字已经落入文本框里面了
当我们失去焦点，就隐藏这个con盒子
当我们获得焦点，并且文本框内容不为空，就显示这个con盒子

<!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;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }  
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>
<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup',function(){
           if (this.value == ''){
               con.style.diaplay = '';
           } else {
            con.style.display = 'block';
            con.innerHTML = this.value;
           }
        })
        //当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur',function(){
            con.style.diaplay = 'none';
        })
        jd_input.addEventListener('focus',function(){
            if(this.value == ''){
                con.style.diaplay = 'none';
            } else {
                con.style.diaplay = 'block';
            }
        })
    </script>
</body>

欧泡果奶O

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记3-Web APIs（DOM）

一、Web APIs 和 JS 基础关联性1.1 JS的组成1.2 JS基础阶段以及 Web APIs阶段JS基础阶段我们学习的是ECMAScript标准规定的基本语法要求同学们掌握JS基础语法只学习基本语法,做不了常用的网页交互效果目的是为了JS后面的课程打基础、做铺垫Web APIs阶段Web APIs是W3C组织的标准 Web APIs我们主要学习DOM和BOM Web APIs是我们JS所独有的部分我们主要学习页面交互功能需要使用JS基础的课程内容做
复制链接

扫一扫