黑马Pink老师DOM和BOM学习笔记

一、Web APIs简介导读

（一）Web APIs和JS基础关联性

1.JS的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTKrwpOg-1663339982591)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220530175513533.png)]

2.JS基础阶段

学习ECMAScript标准规定的基本语法，主要是为后期进行打基础、做铺垫

3.Web APIs阶段

Web APIs是W3C组织的标准，Web APIs主要学习DOM和BOM，Web APIs是JS的独有部分，主要学习页面交互功能

（二）API和Web API

1.API

API（Application Programming Interface，应用程序编程接口 ）是一些预先定义好的的函数，目的是提供应用程序与开发人员基于某些软件或者硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

2.Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

二、DOM

（一）DOM简介

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DFkfMM8F-1663339982592)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220530181515322.png)]

• 文档：一个页面就是一个文档，DOM中使用doucument来表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

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

（二）获取元素

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

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

1.根据ID获取

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

doucument.getElementById('id名')

<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);
    // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>

console.dir 打印我们的元素对象，更好的查看里面的属性和方法

2.根据标签名获取

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

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
• 得到元素对象是动态的
• 返回的是获取过来元素对象的集合，以伪数组的形式存储
• 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

<ul>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
</ul>
<script>
    // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2.依次打印,遍历
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3.如果页面中只有 1 个 li，返回的还是伪数组的形式
    // 4.如果页面中没有这个元素，返回的是空伪数组
</script>

3.根据标签名获取父元素的所有子元素

element.getElementsByTagName('标签名')
ol.getElementsByTagName('li');

<ol id="ol">
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ol>
<script>
    // 方法一：利用选择父元素标签，然后将
    // 第一个数组作为父元素，选择子元素
    var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));
    // 方法二：给父元素添加id属性，然后
    // 将选择的ID作为父元素，选择子元素
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script><script>
    //element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script>

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

4.通过H5新增方法获取

<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>

1）getElementsByClassName

根据类名返回元素对象合集

document.getElementsByClassName('类名'); 

//1.getElementsByClassName
//根据类名返回元素对象合集
var boxs = document.getElementsByClassName('box');
console.log(boxs);

2）document.querySelector

根据指定选择器返回第一个元素对象

document.querySelector('选择器');
// 切记里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var firstBox = document.querySelector('.box');

//2. document.querySelector
//根据指定选择器返回第一个元素对象
var firstbox = document.querySelector('.box');
console.log(firstbox);
var nav = document.querySelector('#nav');
console.log(nav);

3）document.querySelectorAll

根据指定选择器返回所有元素对象

document.querySelectorAll('选择器');

//3.document.querySelectorAll
//根据指定选择器返回所有元素对象
var allbox = document.querySelectorAll('.box');
console.log(allbox);

PS：

querySelector 和 querySelectorAll 里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

5.获取特殊元素

1）获取body元素

返回body元素对象

// 返回body元素对象
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);document.body;

2）获取html元素

返回html元素对象

// 返回html元素对象
var htmlEle = document.documentElement;
console.log(htmlEle);

（三）事件基础

1.事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发— 响应机制。

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

2、事件三要素

1. 事件源(谁)
2. 事件类型(什么事件)
3. 事件处理程序(做啥)

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

3.执行事件的步骤

1. 获取事件源
2. 注册事件(绑定事件)
3. 添加事件处理程序(采取函数赋值形式)

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

4.鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

（四）操作元素

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

1.改变元素内容

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

element.innerText

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

element.innerHTML

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

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

2.改变元素属性

// img.属性
img.src = "xxx";
//表单属性
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

<script>
    //    1.获取元素
    var btimg1 = document.getElementById('btimg1');
    var btimg2 = document.getElementById('btimg2');
    var img = document.getElementById('img');
    // 2.注册事件
    // 3.处理程序
    btimg1.onclick = function () {
        img.src = 'AnniEiffel.jpg';
        img.title = '埃菲尔铁塔';
    }
    btimg2.onclick = function () {
        img.src = 'SquirrelNesting.jpg'
        img.title = '松鼠';
    }
</script>           

<button>按钮</button>
<input type="text" value="输入文字">
<script>
    // 1.获取元素 
    var btn = document.querySelector('button');
    var boder = document.querySelector('input');
    // 2.注册事件 3.处理事件
    btn.onclick = function () {
        boder.value = '输入数字';
        //禁用按钮
        // 方法一：
        // btn.disabled = true;
        // 方法二：
        // this指向的是事件函数的调用者，就是btn
        this.disabled = true;
    }
</script>

3.改变样式属性

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

• 行内样式操作

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

<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';
    }
</script>

• 类名样式操作

// element.className

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(222, 23, 23);
    }

    .change{
        width: 200px;
        height: 200px;
        background-color: rgb(81, 0, 255);
        color: #fff;
    }
</style>

<body>
    <div class="first">文本</div>
    <script>
        var test = document.querySelector('div');
        // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
        test.onclick = function(){
            // 让当前元素的类名改为change
            this.className = 'change'
        }
        // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
        test.onclick = function(){
            // 让当前元素的类名改为first和change
            this.className = 'first change'
        }
    </script>
</body>

PS：
1.JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
2.JS 修改 style 样式操作 ，产生的是行内样式，CSS权重比较高
3.如果样式修改较多，可以采取操作类名方式更改元素样式
4.class 因为是个保留字，因此使用className来操作元素类名属性
5.className 会直接更改元素的类名，会覆盖原先的类名

4.总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-011iQ8uf-1663339982593)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220602230108221.png)]

5.排他思想

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

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

<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 = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
        //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
    </script>
</body>

6.自定义属性

1）获取属性值

• 获取内置属性值(元素本身自带的属性)

element.属性;

• 获取自定义的属性

element.getAttribute('属性');

2）设置属性值

• 设置内置属性值

element.属性 = '值';

• 主要设置自定义的属性

element.setAttribute('属性','值');

3）移除属性

element.removeAttribute('属性');

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>
</body>

7.H5自定义属性

自定义属性目的：

• 保存并保存数据，有些数据可以保存到页面中而不用保存到数据库中
• 有些自定义属性很容易引起歧义，不容易判断到底是内置属性还是自定义的，所以H5有了规定

1）设置H5自定义属性

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

<div data-index = "1"></>
// 或者使用JavaScript设置
div.setAttribute('data-index',1);

2）获取H5自定义属性

• 兼容性获取 element.getAttribute('data-index')
• H5新增的：element.dataset.index 或element.dataset['index'] IE11才开始支持

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

（五）节点操作

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

1.利用DOM提供的方法获取元素：document.getElementById() document.getElementsByTagName()，document.querySelector 等 逻辑性不强，繁琐
2.利用节点层级关系获取元素：利用父子兄节点关系获取元素。逻辑性强，但是兼容性较差

1.节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

元素节点：nodeType 为1
属性节点：nodeType 为2
文本节点：nodeType 为3(文本节点包括文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点

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

2.父级节点

node.parentNode

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

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
</body>

3.子结点

parentNode.childNodes(标准)

• parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
• 返回值包含了所有的子结点，包括元素节点，文本节点等
• 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children(非标准)

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

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <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>
</body>

1）第一个子结点

parentNode.firstChild

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

2）最后一个子结点

parentNode.lastChild

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

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

3）第一个子结点(兼容性)

parentNode.firstElementChild

• firstElementChild 返回第一个子节点，找不到则返回null
• 有兼容性问题，IE9以上才支持

4）最后一个子结点(兼容性)

parentNode.lastElementChild

• lastElementChild 返回最后一个子节点，找不到则返回null
• 有兼容性问题，IE9以上才支持

5）解决方案

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

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

// 数组元素个数减1 就是最后一个元素的索引号
parentNode.chilren[parentNode.children.length - 1]

<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);
        // 返回的是文本结点 #text(第一个换行结点)
        
        console.log(ol.lastChild);
        // 返回的是文本结点 #text(最后一个换行结点)
        // 2. firstElementChild 返回第一个子元素结点
        console.log(ol.firstElementChild);
        // <li>我是li1</li>
        
        // 第2个方法有兼容性问题，需要IE9以上才支持
        // 3.实际开发中，既没有兼容性问题，又返回第一个子元素
        console.log(ol.children[0]);
        // <li>我是li1</li>
        console.log(ol.children[3]);
        // <li>我是li4</li>
        // 当里面li个数不唯一时候，需要取到最后一个结点时这么写
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

4.兄弟节点

1）下一个兄弟节点

node.nextSibling

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

2）上一个兄弟节点

node.previousSibling

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

3）下一个兄弟节点(兼容性)

node.nextElementSibling

• nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
• 有兼容性问题，IE9才支持

4）上一个兄弟节点(兼容性)

node.previousElementSibling

• previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
• 有兼容性问题，IE9才支持

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

如何解决兼容性问题 ？

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

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

5.创建节点

document.createElement('tagName');

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

1）添加节点

node.appendChild(child)

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

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
        // 先获取父亲ul
        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>

2）删除节点

node.removeChild(child)

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

3）复制节点(克隆节点)

node.cloneNode()

• node.cloneNode()方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
• 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
• 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

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

6.三种动态创建元素的区别

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

区别：

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

<body>
    <div class="innner"></div>
    <div class="create"></div>
    <script>
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // 2.1 innerHTML 用拼接字符串方法
        for (var i = 0; i <= 100; i++) {
            inner.innerHTML += '<a href="#">百度</a>';
        }
        // 2.2 innerHTML 用数组形式拼接
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');

        // 3.document.createElement() 创建元素
        var create = document.querySelector('.create');
        var a = document.createElement('a');
        create.appendChild(a);
    </script>
</body>

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

（六）DOM核心

对于DOM操作，我们主要针对子元素的操作，主要有

创建，增，删，改，查，属性操作，时间操作

1.创建

document.write，innerHTML，createElement

2.增

appendChild，insertBefore

3.删

removeChild

4.改

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

5.查

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

6.属性操作

主要针对于自定义属性
setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute：移除属性

三、事件高级

（一）注册事件(绑定事件)

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式	方法监听注册方式
利用 on 开头的事件 onclick	w3c 标准推荐方式
<button onclick = "alert("hi")"></button>	addEventListener() 它是一个方法
btn.onclick = function() {}	IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数	按注册顺序依次执行

1.addEventListener事件监听方式

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

eventTarget.addEventListener(type,listener[,useCapture])

该方法接收三个参数：

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

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
            alert('hao a u');
        }
        // 2. 事件监听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 所以加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })
        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

2.attachEvent事件监听方式(兼容)

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

eventTarget.attachEvent(eventNameWithOn,callback)

该方法接收两个参数：

• eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
• callback： 事件处理函数，当目标触发事件时回调函数被调用
• ie9以前的版本支持

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

（二）删除事件(解绑事件)

1.removeEventListener删除事件方式

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

该方法接收三个参数：

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

2.detachEvent删除事件方式(兼容)

eventTarget.detachEvent(eventNameWithOn,callback);

该方法接收两个参数：

• eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
• callback： 事件处理函数，当目标触发事件时回调函数被调用
• ie9以前的版本支持

3.传统事件删除方式

eventTarget.onclick = null;

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2.removeEventListener 删除事件
        divs[1].addEventListener('click',fn);   //里面的fn不需要调用加小括号

        function fn(){
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        // 3.IE9 中的删除事件方式
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }
    </script>
</body>

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

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

（三）DOM事件流

• 事件流描述的是从页面中接收事件的顺序

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

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

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

加深理解：

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

1.捕获阶段

• document -> html -> body -> father -> son

两个盒子嵌套，一个父盒子一个子盒子，我们的需求是当点击父盒子时弹出 father ，当点击子盒子时弹出 son
这是因为捕获阶段由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收
先看 document 的事件，没有；再看 html 的事件，没有；再看 body 的事件，没有；再看 father 的事件，有就先执行；再看 son 的事件，再执行。

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 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);
    </script>
</body>

2.冒泡阶段

• son -> father ->body -> html -> document

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 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');
        })
    </script>
</body>

我们点击子盒子，会弹出 son、father、document，这是因为冒泡阶段开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

• son -> father ->body -> html -> document

3.小结

• JS 代码中只能执行捕获或者冒泡其中的一个阶段
• onclick 和 attachEvent只能得到冒泡阶段
• addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序
• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
• 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

（四）事件对象

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

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

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

1.事件对象的兼容性方案

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

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

解决：

e = e || window.event;

<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
            // e = e || window.event;
            console.log(e);
            // 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
        }
    </script>
</body>

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

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 ie6-8使用
e.type	返回事件的类型 比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡，非标准，ie6-8使用
e.returnValue	该属性阻止默认行为 非标准，ie6-8使用
e.preventDefault()	该方法阻止默认行为 标准 比如不让链接跳转
e.stopPropagation()	阻止冒泡 标准

3.e.target 和 this 的区别：

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素。
• e.target点击了哪个元素就返回哪个元素
• this了哪个元素绑定了事件就返回哪个元素

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： 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);
            console.log(e.currentTarget);

            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
            console.log(e.target);

        })
        // 了解兼容性
        // div.onclick = function(e) {
        //     e = e || window.event;
        //     var target = e.target || e.srcElement;
        //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

4.事件对象阻止默认行为

<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(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault(); //  dom 标准写法
        })
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

（五）阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

• 标准写法

e.stopPropagation();

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

e.cancelBubble = true;

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

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

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

（六）事件委托

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

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
            // 点了谁，就让谁的style里面的backgroundColor颜色变为pink
        })
    </script>
</body>

以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。

（七）常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1.禁止鼠标右键与鼠标选中

• contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
• selectstart 禁止鼠标选中

<body>
    <h1>我是一段不愿意分享的文字</h1>
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认行为
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

2.鼠标事件对象

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

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX（重点）	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY（重点）	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

（八）常用的键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等

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

<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');

        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
            console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
</body>

键盘对象属性

键盘事件对象 属性	说明
keyCode	返回该键值的ASCII值

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

<body>
    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            }
            else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            console.log('press:' + e.keyCode);
        })
    </script>
</body>

四、BOM

（一）BOM概述

BOM = Browser Object Model 👉浏览器对象模型
它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分

DOM	BOM
文档对象模型	浏览器对象模型
DOM 就是把 文档 当作一个对象来看待	把 浏览器当作一个对象来看待
DOM 的顶级对象是 document	BOM 的顶级对象是 window
DOM 主要学习的是操作页面元素	BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范	BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

1.BOM的构成

BOM 比 DOM 更大。它包含 DOM。

window 对象是浏览器的顶级对象，它具有双重角色：

1）它是 JS 访问浏览器窗口的一个接口
2）它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
3）在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。

注意：window下的一个特殊属性 window.name

// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10

// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
    console.log(11);
}
fn();
// 11

var name = 10;  //不要用这个name变量,window下有一个特殊属性window.name
console.log(window.num);

（二）Windows对象常见操作

1.窗口加载事件

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

window.onload = function(){
    
};

// 或者
window.addEventListener("load",function(){});

注意：

有了window.onload就可以把JS代码写到页面元素的上方
因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload 传统注册事件方式，只能写一次
如果有多个，会以最后一个window.onload为准
如果使用addEventListener 则没有限制

document.addEventListener('DOMContentLoaded',function(){})

接收两个参数：

DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间
交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

区别

• load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等
• DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

<body>
    <button>点击</button>
    <script>
        // 有了window.onload就可以把JS代码写到页面元素的上方
        // 因为onload是等页面内容全部加载完毕，再去执行处理函数
        // window.onload 传统注册事件方式，只能写一次
        // 如果有多个，会以最后一个window.onload为准    
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }

        window.addEventListener('load', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我');
            })
        })
        window.addEventListener('load', function () {
            alert(22);
        })

        // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
        // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
        document.addEventListener('DOMContentLoaded', function () {
            alert(33);
        })
    </script>
</body>

2.调整窗口大小事件

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

window.onresize = function() {}

// 或者
window.addEventListener('resize',function(){});

• 只要窗口大小发生像素变化，就会触发这个事件
• 我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

<body>
    <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                // 打印屏幕宽度
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

（三）定时器

window 对象给我们提供了两个定时器

• setTimeout()
• setInterval()

1.setTimeout()定时器

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

window.setTimeout(调用函数,[延迟的毫秒数]);

注意：

• window可以省略
• 这个调用函数
  • 可以直接写函数
  • 或者写函数名
  • 或者采取字符串 ‘函数名()’ （不推荐）
• 延迟的毫秒数省略默认是0，如果写，必须是毫秒
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
• setTimeout() 这个调用函数我们也称为回调函数 callback
• 普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。

<body>
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)

        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

2.clearTimeout()停止定时器

• clearTimeout()方法取消了先前通过调用 setTimeout()建立的定时器

window.clearTimeout(timeoutID)

注意：

• window可以省略
• 里面的参数就是定时器的标识符

<body>
    <button>点击停止定时器</button>
    <script>
        var button = document.querySelector('button');
        var time = setTimeout(function () {
            console.log('爆炸了');
        }, 5000)
        button.addEventListener('click', function () {
            clearTimeout(time);
        })
    </script>
</body>

3.setInterval()定时器

• setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

window.setInterval(回调函数,[间隔的毫秒数]);

• window可以省略
• 这个回调函数:
  • 可以直接写函数
  • 或者写函数名
  • 或者采取字符 ‘函数名()’
• 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

4.clearInterval()停止定时器

• clearInterval () 方法取消了先前通过调用 setInterval() 建立的定时器

注意：

• window可以省略
• 里面的参数就是定时器的标识符

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function () {
            timer = setInterval(function () {
                console.log('你没事吧');

            }, 1000);
        })
        stop.addEventListener('click', function () {
            clearInterval(timer);
        })
    </script>
</body>

5.this指向

• this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

现阶段，我们先了解一下几个this指向

• 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
• 方法调用中谁调用this指向谁
• 构造函数中this指向构造函数实例

<body>
    <button>点击</button>
    <script>
        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

        // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();
    </script>
</body>

（四）JS执行队列

1.JS是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

2.一个问题

以下代码执行的结果是什么？

console.log(1);
setTimeout(function() {
    console.log(3);
},1000);
console.log(2);

那么以下代码执行的结果又是什么？

console.log(1);
setTimeout(function() {
    console.log(3);
},0);
console.log(2);

3.同步和异步

• 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程
• 于是，JS 中出现了同步和异步。
• 同步：前一个任务结束后再执行后一个任务
• 异步：在做这件事的同时，你还可以去处理其他事情
• 同步任务都在主线程上执行，形成一个 执行栈
• JS中的异步是通过回调函数实现的
• 异步任务有以下三种类型
  • 普通事件，如click,resize等
  • 资源加载，如load,error等
  • 定时器，包括setInterval,setTimeout等
• 异步任务相关回调函数添加到任务队列中

1. 先执行执行栈中的同步任务
2. 异步任务(回调函数)放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

此时再来看我们刚才的问题：

console.log(1);
setTimeout(function() {
    console.log(3);
},1000);
console.log(2);

• 执行的结果和顺序为 1、2、3

console.log(1);
setTimeout(function() {
    console.log(3);
},0);
console.log(2);

• 执行的结果和顺序为 1、2、3

// 3. 第三个问题
console.log(1);
document.onclick = function() {
    console.log('click');
}
console.log(2);
setTimeout(function() {
    console.log(3)
}, 3000)

同步任务放在执行栈中执行，异步任务由异步进程处理放到任务队列中，执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行，由于主线程不断的重复获得任务 、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

（五）Location对象

• window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。window 对象给我们提供了一个 location属性用于获取或者设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

1.url

统一资源定位符（uniform resouce locator）==是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

url 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议 常用的http,ftp,maito等
host	主机(域名) www.itheima.com
port	端口号，可选
path	路径 由零或多个'/'符号隔开的字符串
query	参数 以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容 常见于链接 锚点

2.location对象属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接 锚点

重点记住： href和search

需求：5s之后跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } 
            else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>
</body>

3.location对象方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 ，如果参数为true 强制刷新 ctrl+f5

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.itcast.cn');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            // 重新加载页面，相当于刷新按钮或者 f5 ，如果参数为true 强制刷新 ctrl+f5
            location.reload(true);
        })
    </script>
</body>

4.获取URL参数

我们简单写一个登录框，点击登录跳转到 index.html

<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

接下来我们写 index.html

<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

这样我们就能获取到路径上的URL参数

（六）Navigation对象

navigator 对象包含有关浏览器的信息，它有很多属性
我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
下面前端代码可以判断用户是用哪个终端打开页面的，如果是用 PC 打开的，我们就跳转到 PC 端的页面，如果是用手机打开的，就跳转到手机端页面

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

（七）History对象

• window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互
• 该对象包含用户（在浏览器窗口中）访问过的 URL。

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是 1 前进1个页面 如果是 -1 后退1个页面

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>

五、PC网页特效

（一）元素偏移量offset系列

1.概述

offset——偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移量）和大小等

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度和高度）

PS：返回的数值都是没有单位的

属性	描述
element.offsetParent	返回带有定位的父亲，否则返回的是body
element.offsetTop	返回元素相对带有定位父元素上方的偏移，若没有父亲或父亲不带单位，则以body为准
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移，若没有父亲或父亲不带单位，则以body为准
element.offsetWidth	返回自身包括padding、边框、内容区的宽度
element.offsetHeight	返回自身包括padding、边框、内容区的高度度

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        var w = document.querySelector('.w');
        //返回带有定位的父亲，否则返回的是body
        console.log(son.offsetParent);
        //返回的是最近一级的父亲，不管有没有定位
        console.log(son.parentNode);

        // 返回元素相对带有定位父元素上方的偏移，若没有父亲或父亲不带单位，则以body为准
        console.log(father.offsetTop);
        // 返回元素相对带有定位父元素左边框的偏移，若没有父亲或父亲不带单位，则以body为准
        console.log(father.offsetLeft);
        //他以带有定位的父亲为准，如果没有父亲或父亲没有定位，以body为准
        console.log(son.offsetLeft);

        // 返回自身包括padding、边框、内容区的宽度
        console.log(w.offsetWidth);
        // 返回自身包括padding、边框、内容区的高度度
        console.log(w.offsetHeight);
    </script>
</body>

2.offset系列和style的区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+ border+width	style.width获得不包含padding和border的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改变

（二）元素可视区client系列

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client相关属性可以动态的得到该元素的边框大小、元素大小等。

1.client系列常用属性

client相关属性	描述
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回值不带单位

client和offset最大的区别是返回宽度和高度时，offset包括边框，client不包括边框。

2.flexible分析案例

1）立即执行函数

立即执行函数：不需要调用，立马能够自己执行的函数。

(function () {
    console.log('riki');
})();   
// or
(function sum(a, b) {
    console.log(a + b);
}(2, 3));

注意：

• 第二个小括号可以看作是调用函数,也可以在里面传参。
• 立即执行函数最大的作用就是独立创建了一个作用域,里面所有的变量全部是局部变量,不会出现命名冲突。
• 也可以给函数起名字

2）pageshow事件

有三种情况会刷新页面而触发load事件：

1. a标签的超链接。
2. F5或者刷新按钮。
3. 前进后退按钮。

但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。

此时可以使用pageshow事件来触发。这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发，根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。

（三）元素滚动scroll系列

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

1.scroll系列常用属性

属性	描述
element.scrollTop	返回被卷去的上侧距离
element.scrollLeft	返回被卷去的左侧距离
element.scrollWidth	返回自身实际内容的宽度，不含边框
element.scrollHeight	返回自身实际内容的宽度，不含边框

PS：返回值都不带单位。

2.页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

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>
            .w {
                width: 1200px;
                margin: 10px auto;
            }

            .slider-bar {
                position: absolute;
                left: 50%;
                top: 300px;
                margin-left: 600px;
                width: 45px;
                height: 130px;
                background-color: orchid;
            }

            .header {
                height: 150px;
                background-color: hotpink;
                margin-bottom: 20px;
            }

            .banner {
                height: 300px;
                background-color: aqua;
                margin-bottom: 20px;
            }

            .main {
                height: 1000px;
                background-color: lawngreen;
            }

            span {
                display: none;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <div class="slider-bar">
            <span class="goBack"> <a href="#header">返回顶部</a> </span>
        </div>
        <div id="header" class="header w">头部区域</div>
        <div class="banner w">banner区域</div>
        <div class="main w">主体区域</div>
        <script>
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // bannerTop就是被卷去的部分高度
            var bannerTop = banner.offsetTop;
            // sliderTop是侧边栏离顶部的高度
            var sliderTop = sliderbar.offsetTop - bannerTop;
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            document.addEventListener('scroll', function () {
                // window.pageYOffset页面被卷去的头部
                console.log(window.pageYOffset);
                // 当页面被卷去的头部大于等于banner的offsetTop时(到达banner区域),侧边栏改为固定定位
                if (window.pageYOffset >= bannerTop) {
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = sliderTop + 'px';
                } else {
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = 300 + 'px';
                }
                // 当页面被卷曲的头部大于等于主体部分的offsetTop时,侧边栏出现"返回顶部"的模块
                if (window.pageYOffset >= mainTop) {
                    goBack.style.display = 'block';
                } else {
                    goBack.style.display = 'none';
                }
            })

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

4. 三大系列总结

offset系列经常用于获得元素位置offsetLeft、offsetTop。
client经常用于获取元素大小clientWidth、clientHeight。
scroll经常用于获取滚动距离 scrollTop 、scrollLeft。
注意页面滚动的距离通过window.pageXoffset获得。

5.mouseover和mouseenter的区别

二者都是鼠标经过事件。

1. 但是，mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。
2. mouseenter只会经过自身盒子触发，之所以这样，就是因为mouseenter不会冒泡。
3. mouseenter搭配mouseleave使用，同样不会冒泡。

（四）动画函数封装

1.动画原理

核心原理：通过定时器setInterval()不断移动盒子位置。

实现步骤:

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

var div = document.querySelector('div');
var timer = setInterval(function () {
    if (div.offsetLeft >= 400) {
        clearInterval(timer);
    }
    div.style.left = div.offsetLeft + 1 + 'px';
}, 10)

2.简单动画函数封装

第一个参数是对象，第二个参数是目标位置。

function animate(obj, target) {
    var timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30)
}

改良版：提高了效率，给不同对象添加不同的定时器。

function animate(obj, target) {
    // 目的是让元素只能有一个定时器，防止定时器效果累加
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30)
}

3.缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。

思路:

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法:(目标值-现在的位置)/ 10做为每次移动的距离步长。
3. 停止条件：当前位置等于目标位置就停止定时器。

function animate(obj, target) {
    // 目的是让元素只能有一个定时器，防止定时器效果累加
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长值写在定时器里面
        // 把步长值改为整数，尽量避免小数的出现
        // 前进：向上取整
        // 后退：向下取整
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

4.回调函数

等动画执行完毕后，再执行另一个函数的动作。

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 回调函数写在定时器结束里
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            // 如果有回调函数传进来
            if (callback) {
                // 调用函数
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

（五）常见网页特效案例

六、移动端网页

（一）touch触摸

事件	说明
touchstart	手指触摸时触发
touchmove	手指在元素上滑动时触发
touchend	手指离开时触发

let div = document.querySelector('div');
div.addEventListener('touchstart', () => {
    console.log('触摸');
})
div.addEventListener('touchmove', () => {
    console.log('移动');
})
div.addEventListener('touchend', () => {
    console.log('离开');
})

（二）触摸事件对象

TouchEvent是一类描述手指在触摸平面状态变化的事件。这类事件用于描述一个或者多个触点，使开发者可以手动检测触点的移动、触点的增加、触点的减少等

触摸列表	说明
touches	正在触摸屏幕的所有手指的列表
targetTouches	正在触摸当前DOM元素上的手指列表
changedTouches	手指状态发生改变的列表，从无到有，从有到无的变化

• 当手指离开屏幕时，就没有touches和targetTouches列表，但是会有changedTouches

七、本地存储

（一）localStorage

1.什么是localStorage

​ 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

2.localStorage的优势和局限

• 优势

localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

• 局限
  • 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
  • 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
  • localStorage在浏览器的隐私模式下面是不可读取的
  • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  • localStorage不能被爬虫抓取到
  • localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

3.localStorage常用方法

我们首先在Chrome浏览器的控制台输入localStorage来查看其自带的方法。摘录了一些常用的API如下表所示

名称	作用
setItem	存储数据
getItem	读取数据
clear	清空localStorage上存储的数据
removeItem	删除某个具体变量
key	读取第i个数据的名字或称为键值(从0开始计数)
length	获取localStorage存储变量的个数

• 存储数据setItem

if (!window.localStorage) {
  console.log('浏览器版本太低，不支持localStorage')
} else {
  let storage = window.localStorage
  storage.setItem('a', 1) // 存储名为a值为1的变量
  storage.b = 2           // 存储名为b值为2的变量
  storage['c'] = 3        // 存储名为c值为3的变量
}

• 读取数据getItem

storage.getItem('a') // 1 读取保存在storage对象里名为a的变量值
storage.b            // 2 读取保存在storage对象里名为b的变量值
storage['c']         // 3 读取保存在storage对象里名为c的变量值
storage.key(0)       // 1 根据key值读取数据,key(0)代表对象的第一条数据
storage.valueOf()    // 读取保存在storage对象上的全部数据

• 修改数据

if (!window.localStorage) {
  console.log('浏览器版本太低，不支持localStorage')
} else {
  let storage = window.localStorage
  // 写入a字段
  storage.a = 1
  // 修改a字段
  storage.a = '@Demi'
}

• 删除数据clear()和removeItem()

if (!window.localStorage) {
  console.log('浏览器版本太低，不支持localStorage')
} else {
  let storage = window.localStorage
  storage.clear()         // 删除所有键值对
  storage.removeItem('a') // 删除指定的键值对
}

• 注意事项

  我们一般会将一个对象存入localstorage中，但是localstorage会自动将对象数据转换成字符串形式，这时候我们可以使用JSON.stringify()这个方法，来将数据转换成JSON字符串存入localstorage存入，当读取的时候再使用JSON.parse（）方法读取出来。
  

if (!window.localStorage) {
  console.log('浏览器版本太低，不支持localStorage')
} else {
  let storage = window.localStorage
  let data = {
     name: 'Demi',
     sex: 'woman',
     hobby: 'program'
  }
  // 将对象转换成JSON格式存入localStorage
  let dataValue = JSON.stringify(data)
  storage.setItem('data', dataValue)

  // 从localstorage中取出数据转换成对象格式
  let json = storage.getItem('data')
  let jsonObj = JSON.parse(json)
}

• 查看浏览器的localstorage

  1. 进入浏览器开发者工具
  
  2. 选择Application
  
  3. 在窗口左侧选择localStorage
  

（二）sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• **在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，**这点和 session cookies 的运行方式不同。
• 打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
• 关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取文本输入框
let field = document.getElementById("field");

// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave");
}

// 监听文本输入框的 change 事件
field.addEventListener("change", function() {
  // 保存结果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value);
});