Web API

一、API

接口（预定义的函数），简单理解为给程序员提供的一个工具，以便实现想要的功能

二、Web API

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

三、DOM文档对象模型

1、DOM

• 编程接口

2、DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示

• 元素：页面中所有标签都是元素，DOM中使用element表示

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

3、获取元素

//（1）根据id获取，返回带有id的元素对象
document.getElementById('id');
//（2）根据标签名获取，返回带有指定标签名的对象的集合，是一个伪元素
document.getElementsByTagName('标签名');
//（3）通过HTML5新增的方法获取
//querySelector() 返回指定选择器的第一个元素对象
document.querySelector('.类名');
document.querySelector('#id名');
//querySelectorAll()返回指定选择器的所有元素对象集合
document.querySelectorAll('.类名');
//（4）特殊元素获取
//获取body 元素
varbodyEle=document.body;
//获取html 元素
varhtmlEle=document.html;
varhtmlEle=document.documentElement;

4、事件基础

4.1、事件概述：触发---响应机制

4.2、事件三要素

事件源（谁做）、事件类型（什么事件）、事件处理程序（做什么）

4.3、执行事件的步骤

获取事件源---注册事件---添加事件处理程序

4.4、鼠标事件

mouseenter和mouseover的区别

• mouseenter不会冒泡

5、操作元素

5.1、改变元素内容

element.innerText

element.innerHTML

innerText 和 innerHTML的区别

• innerText 不识别html标签 非标准 去除空格和换行

• innerHTML 识别html标签 W3C标准 保留空格和换行的

• 这两个属性是可读写的 可以获取元素里面的内容

5.2、常见元素属性

src、href、id、alt、title

5.3、表单属性操作

// 2. 注册事件 处理程序
btn.onclick=function() {
// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value='被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled  这个按钮 button禁用
// btn.disabled = true;
this.disabled=true;
// this 指向的是事件函数的调用者 btn

5.4、样式属性操作

1.element.style.backgroundColor="red"   //js操作样式
2.element.className="bg"   // 类名样式操作

• JS 里面的样式采取驼峰命名法 。比如 fontSize、 backgroundColor

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

• css的属性值要加引号

5.5、排他思想

// 1. 获取所有按钮元素
varbtns=document.getElementsByTagName('button');
// btns得到的是伪数组  里面的每一个元素 btns[i]
for (vari=0; i<btns.length; i++) {
   btns[i].onclick=function() {
   // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
        // for (var i = 0; i < btns.length; i++) {
        //     btns[i].style.backgroundColor = '';
        // }
    console.log(i);
        for(varj=0;j<btns.length;j++){
            console.log(j);
            btns[j].style.backgroundColor='';
        }
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
        this.style.backgroundColor='pink';
   }
}
//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想

5.6、自定义属性操作

element.属性  // 获取标签行内属性值（元素本身自带的属性）
element.getAttribute('属性');      // 获取标签行内属性值（自定义的属性）
element.属性='属性值'  // 设置标签行内属性值
div.className='nav'  //设置类名（特殊）
element.setAttribute('属性', '属性值'); // 设置标签行内属性值
div.setAttribute('class','nav') //设置类名
element.removeAttribute('属性');    // 移除标签行内属性
​
<divgetTime="20"data-index="2"data-list-name="andy"></div>
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset['listName']);

• 一般情况下，使用element.属性 获取内置属性；element.getAttribute('属性') 获取自定义属性

• 自定义属性一般以data-开头

• 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法

6、节点操作

6.1、概述

• 元素节点 nodeType 为 1（重点）

• 属性节点 nodeType 为 2（了解）

• 文本节点 nodeType 为 3（了解）

6.2、获取元素节点

// 利用 DOM 方法获取元素节点
document.getElementById() 
document.getElementByTagName()
// 利用父级节点关系获取元素（亲爸爸）  如果指定的节点没有父节点则返回 null 
​
node.parentNode  
// 利用子节点关系获取元素
parentNode.children//只读属性，返回所有的子元素节点（不包括空格和换行）
parentNode.children[0] //返回第一个子节点（常用）
parentNode.chilren[parentNode.chilren.length-1] //返回最后一个子元素节点
parentNode.firstChild//返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。（了解）
parentNode.lastChild  //返回最后一个子节点，找不到则返回null（了解）
node.nextSibling//返回当前元素的下一个兄弟元素节点，找不到则返回null。
node.previousSibling    //返回当前元素上一个兄弟元素节点，找不到则返回null。

6.3、创建节点

document.createElement('tagName')

6.4、添加节点

node.appendChild(child) //将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child) //将一个节点添加到指定父节点的子节点列表前面

6.5、删除节点

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

6.6、复制节点

node.cloneNode() //返回调用该方法的节点的一个副本

• 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

• 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

6.7、替换节点

parentNode.replaceChild(newChild, oldChild); //用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

6.8、创建元素

//innerHTML 创建元素
//采用字符串拼接创建元素
// var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
       //inner.innerHTML += '<a href="#">百度</a>'
//}
//采用数组形式拼接创建元素
vararr= [];
for (vari=0; i<=100; i++) {
  arr.push('<a href="#">百度</a>');
}
inner.innerHTML=arr.join('');

• document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘（了解）

• innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

• innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题

• 如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接）

• 如果页面创建元素较少，建议使用 createElement()

四、事件高级

1、注册事件（绑定事件）

（1）利用on开头的事件，如onclick

注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

（2）addEventListener('事件类型','事件处理函数')

它是一个方法，事件类型不需要加on，同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行

2、删除事件

removeEventListener()

3、DOM事件流

3.1、概述

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

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

3.2、阶段

• 捕获阶段

• 当前目标阶段

• 冒泡阶段

注意：onblur、onfocus、onmouseenter、onmouseleave没有冒泡

• onclick 和 attachEvent（ie） 只能得到冒泡阶段。

• 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son

• 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document

• 当 son 定位到其他位置，给父亲绑定事件，点击son，父亲也会被触发，在dom中son还是在父亲节点里面的

4、事件对象

4.1、概述

• 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

• 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

• 这个事件对象我们可以自己命名 比如 event 、 evt、 e

• 当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

4.2、事件对象属性和方法

e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）

区别 ：

• e.target ：点击了那个元素，就返回那个元素 ；this： 那个元素绑定了这个点击事件，那么就返回谁

• currentTarget 和 this 非常相似

5、阻止事件冒泡

e.stopPropagation()

6、事件委托

6.1、原理

• 给父元素绑定事件，然后通过事件冒泡的原理，从而影响子元素，这样可以提高性能

7、鼠标事件

7.1、禁止鼠标右键菜单contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

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

7.2、禁止鼠标选中（selectstart 开始选中）

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

7.3、鼠标事件对象

8、键盘事件

8.1、键盘事件（给document添加键盘事件）

• onkeyperss不识别功能键

• 执行顺序：keydown -- keypress -- keyup

• 文本框中的内容是在按下之后才出来，所以在 keyup 的时候才能获取到输入的内容

8.2、键盘事件对象

• keyCode返回该键的ASCLL值

• 注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

五、BOM

1、概念

• 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

• BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

• BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2、DOM和BOM的区别

• DOM文档对象模型 DOM 就是把「文档」当做一个「对象」来看待DOM 的顶级对象是 documentDOM 主要学习的是操作页面元素DOM 是 W3C 标准规范

• BOM浏览器对象模型把「浏览器」当做一个「对象」来看待BOM 的顶级对象是 windowBOM 学习的是浏览器窗口交互的一些对象BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

• BOM包含DOM

3、BOM构成

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

• 它是 JS 访问浏览器窗口的一个接口。

• 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

• 在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

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

4、窗口加载事件

//如果写多个onload，前面的会被后面的覆盖
window.onload=function(){} 
//不加 on ，可以注册多个，不会被覆盖
window.addEventListener("load",function(){});
​
document.addEventListener('DOMContentLoaded',function(){})

• load ：等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等

• DOMContentLoaded ：DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

5、调整窗口大小

window.onresize=function(){}
​
window.addEventListener("resize",function(){});
window.onresize 是调整浏览器窗口大小加载事件,  当触发时就调用的处理函数

注意：

• 只要浏览器窗口大小发生像素变化，就会触发这个事件。

• 我们经常利用这个事件完成响应式布局。

• rem原理：document.documentElement.style.fontSize = innerWidth / 10 + "px"

• window.innerWidth 当前屏幕的宽度

6、定时器

6.1、setTimeout

window.setTimeout(回调函数, [延迟的毫秒数]);
setTimeout() 设置定时器，只触发一次，当经过一段时间后，自动调用里面的函数

注意：

• window 可以省略

• 这个回调函数可以直接写 函数，或者写 函数名 或者 采取字符串 ‘函数名()' （不推荐）

• 延迟的毫秒数省略默认是 0，如果写，必须是毫秒

• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

6.2、停止setTimeout() 定时器

window.clearTimeout(定时器名)

6.3、setInterval()

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

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

• 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

• 因为定时器第一次执行也需要等间隔时间，所以将函数封装起来，先调用一次，防止第一次刷新页面有空白

6.4、停止 setInterval() 定时器

window.clearInterval(定时器名);

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

7、this指向

• 全局作用域或者普通函数中this指向全局对象window

• 定时器里面的this指向window

• 事件处理函数中谁调用this指向谁

• 构造函数中this指向构造函数的实例

8、JS执行机制

8.1、JS是单线程

• js 在执行代码的时候是顺序执行的，一次只能做一件事

8.2、同步和异步

• 同步是当前一个任务执行完毕后再执行下一个

• 异步是同时执行所有的任务

8.3、同步任务

同步任务在主线程中执行，形成一个执行栈

8.4、异步任务

• 异步任务先被放到任务队列中，等待主线程中的同步任务执行完毕，再读取任务队列中的回调函数执行

• 异步任务包括回调函数、定时器

9、location对象

9.1、概念

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

9.2、URL的一般语法格式

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

​

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

9.3、location对象属性

9.4、location对象方法

10、navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

10、 history 对象

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

11、offset

11.1、概述

• element.parentNode返回亲爸爸

• 返回的数值没有单位

11.2、offset与style的区别

offset系列

• 只读属性，不可以赋值，只能获取

• 可以得到任意样式表中的样式值

• 获得的数值是没有单位的

• offsetWidth = padding + border + width

style

• 是可读可写属性，可以获取也可以赋值

• 只能得到行内样式表中的样式值

• style.width获得的是带有单位的字符串

• style.width = width

12、client

13、立即执行函数

13.1、语法

(function(形参){})(实参);
(function(形参){}(实参));

13.2、作用

• 创建一个独立的作用域，避免了命名冲突问题

14、pageshow重新加载页面

15、scroll

• 当内容撑开盒子时，scrollHeight是内容的实际高度，否则和clientHeight一样。

17、flexible.js

• 给 body 设置大小是为了给没有设置字体大小的元素继承

• 给 html 设置大小

• rem原理：document.documentElement.style.fontSize = innerWidth / 10 + "px"

六、动画函数封装

1、原理

• 通过定时器setInterval()不断移动盒子位置

2、简单动画函数封装

// obj目标对象 target 目标位置
functionanimate(obj, target) {
    obj.timer=setInterval(function() {
        if (obj.offsetLeft>=target) {
        // 停止动画 本质是停止定时器
             clearInterval(obj.timer);
         }
        obj.style.left=obj.offsetLeft+1+'px';
    }, 30);
}

3、缓动动画

算法

• 步长：（目标值-当前的位置）/ 10 ---（步长要取整数）

• 停止条件：盒子当前的位置等于目标位置

functionanimate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
         varstep= (target-obj.offsetLeft) /10;
         step=step>0?Math.ceil(step) : Math.floor(step);
         if (obj.offsetLeft==target) {
            // 停止动画 本质是停止定时器
             clearInterval(obj.timer);
          }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left=obj.offsetLeft+step+'px';
​
      }, 15);
 }
varspan=document.querySelector('span');
varbtn500=document.querySelector('.btn500');
varbtn800=document.querySelector('.btn800');
btn500.addEventListener('click', function() {
    // 调用函数
    animate(span, 500);
})
btn800.addEventListener('click', function() {
    // 调用函数
    animate(span, 800);
})

4、回调函数

七、移动端网页特效

1、触摸事件

八、本地存储

1、sessionStorage

• 关闭浏览器窗口数据销毁

• 在同一个窗口下数据共享

• 可以存储 5M 数据

设置值

sessionStorage.setItem(key, value)

获取值

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

删除所有数据

sessionStorage.clear()

2、localStorage

• 持久化存储，可以手动删除

• 同一浏览器不同页面可以共享数据

• 可以存储 20M

设置值

localStorage.setItem(key, value)

获取值

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

删除所有数据

localStorage.clear()