WebAPIs-基础知识

###WebAPIs

• Web APIs 是W3C组织的标准
• Web APIs 是JavaScript所独有的部分
• Web APIs 主要提供页面交互功能
• JS的应用

API (Application Programming Interfact) 应用程序编程接口

• 一些预定义的函数，提供应用程序和开发人员基于某软件或硬件得意访问一组例程的能力

Web API

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

DOM （Document Object Model)

• W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
  可以通过该接口，改变页面的内容、结构、样式

DOM树

• 文档
  一个文件就是一个文档，DOM中使用document表示

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

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

DOM 获取元素

通过ID获取元素

返回一个匹配特定ID的元素，元素ID独一无二 所以特别高效

• 元素须拥有ID

    document.getElementById('ID');

根据标签名获取元素

返回的是 所有匹配元素对象的集合 以伪数组的形式存储

var result = document.getElementByTagName('标签名');

通过HTML5新增的方法获取元素

• 通过Class获取元素

var result = document.getElementsByClassName('ClassName');

• 通过选择器获取元素
  返回选择器的第一个元素对象

var result = document.querySelector('选择器');

• 通过选择器返回所有匹配的元素对象

var results = document.quweySelectorAll('选择器');

特殊元素获取

• 获取body元素

var result = document.body;

• 获取html元素

var result = document.documentElement;

事件

事件基础

事件三要素

• 事件源
  事件被触发的对象 （谁）

• 事件类型
  如何触发（如onclick 如何）

• 事件处理程序
  处理业务，通过函数赋值的方式完成（做什么）

事件的执行步骤

1. 获取事件源
2. 注册事件
3. 添加事件处理程序

事件高级

• 注册事件
  给元素添加事件的行为 称为注册事件或绑定事件

传统方式

注册事件的唯一性 一个事件在一个对象中 只能注册唯一的 （最有一个注册生效）

    btn.onclick = function(){
        ...
    }

方法监听注册方式

W3C标准（推荐） IE9+ 可用attachEvent()代替
同一个元素同一个事件可以注册多个监听器（监听处理函数）
将会依照注册顺序依次执行

    eventTarget.addEventListener(type,listener[,useCapture]);
    
    // type : 事件类型字符串 如 click 字符串类型须带引号 不需要on
    // listener : 事件处理函数，事件发生时将被调用
    // useCapture : 可选 bool  默认 false 指定冒泡阶段还是捕获阶段 ： true 捕获阶段 false 冒泡阶段

IE9 版本前 - attachEvent 示例 只在IE9之前版本的浏览器执行

 var btn = document.querySelecter('button');
 btn.attachEvent('onclick',function(){
    //事件处理
 })

事件注册 - 兼容性封装 （不常用）

 function addEventListener(element,eventName ,fn){
    if(element.addEventListener){
        element.addEventListener(eventName,fn);
    }else if(element.attachEvent){
        element.attachEvent('on' + eventName,fn);
    }else{
        element['on' + eventName] = fn;
    }
 }

• 删除事件

移除已绑定的事件

传统注册方式 解绑

eventTarget.onclick = null;

方法监听 方式解绑 IE9

//删除事件 绑定时 不能使用匿名函数进行注册
eventTarget.removeEventListener(type,listener[,useCapture]);

attachEvent 方式移除 IE9之前版本

//移除事件 绑定时 不能使用匿名函数进行注册
eventTarget.detachEvent(eventNameWhitOn,callback);

事件解绑 - 兼容性封装 （不常用）

 function removeEventListener(element,eventName ,fn){
    if(element.removeEventListener){
        element.removeEventListener(eventName,fn);
    }else if(element.detachEvent){
        element.detachEvent('on' + eventName,fn);
    }else{
        element['on' + eventName] = null;
    }
 }

• DOM事件流程

事件流

描述从页面中接受事件的顺序

DOM事件流

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

DOM事件流的3个阶段

• 捕获阶段 1,2,3
• 当前目标阶段 4
• 冒泡阶段 5,6,7

*1. JS代码中只能执行捕获或者冒泡其中的一个阶段
*2. onclick 和 attachEvent 只能得到冒泡阶段

**一般很少关注捕获事件 而更关注冒泡事件 *
*onblur、onfocus、onmouseenter、onmouseleave 以上事件不存在冒泡
*冒泡需要按需巧妙的使用 以免发生不必要的麻烦

• 事件对象

事件对象 是 事件的一系列相关数据的集合

var div = document.querySelecter('div');
div.onclick = function(event){
 // ...
}

** event就是一个事件对象 可以视作形参*
** 事件对象只有在事件中才会存在，由系统自动创建，无须手动传递*
** 事件对象可以自定义名称*
** 事件对象 在IE678中需要通过window.event获取 兼容处理方式： e = e || window.event *

事件对象常用的属性和方法
|事件对象属性方法|说明|
----|--------
e.target|返回触发事件的对象 标准
e.srcElement| 返回触发事件的对象 IE6~8使用
e.type| 返回事件类型 不带on 如click
e.cancelBubbl| 阻止冒泡 IE6~8使用
e.returnValue| 阻止默认事件 （默认行为） IE6~8使用
e.preventDefault()| 阻止默认事件 标准
e.stopPropagation()| 阻止冒泡 标准

• 阻止事件冒泡

//阻止冒泡
btn.onclick = fucntion(event){
    event.stopPropagation();
}

• 事件委托

事件委托也称事件代理，jq中称事件委派
原理：不再为每个子节点设置监听器，而是在父节点上设置监听，利用冒泡原理影响设置每个子节点

var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
    var li = e.target;
    li.style.backgroundColor = 'red';
});

常用事件

鼠标事件	触发条件
onclick	鼠标左键点击触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
selectstart	进制鼠标选中
contextmenu	默认上下文菜单

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

键盘事件	触发条件
onkeyup	某个键盘被松开时触发 不区分按键大小写
onkeydown	某个键盘被按下时触发 不区分按键大小写
onkeypress	某个键盘被按下时触发 不识别功能按键（如:ctrl shift 箭头方向等）

键盘事件对象	说明
keycode	Ascii码值

// contextmenu 禁用右键菜单
document.addEventListener('contextmenu',function(e){
    e.preventDefault();
});

// selectstart 禁用文字选中
document.addEventListener('selectstart',function(e){
    e.preventDefault();
});

操作元素

改变元素内容

• element.innerText : 从起始位置到终止位置的内容，去除html标签、空格、换行
  *可用于读取元素中的内容

• element.innerHTML : 起始位置到终止位置的全部内容，包括html标签、空格、换行

修改元素属性

var btn = document.getElementById('btn');
var img = document.getElementById('img');
btn.onclick = function(){
    img.src = 'images/xxx.jpg';
}

表单属性

• 表单内的值 文字内容 value属性
• 表单禁用 disabled属性
• 是否被选中 单选 checked属性
• 是否被选中 多选 selected属性
• 表单类型 type属性

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

• 行内样式操作 ： element.style

 el.style.属性名 = 属性值;

** JS中样式采用驼峰命名法:fontSize *
** JS修改 style样式操作，产生的是行内样式，css权重比较高 *
可用 backgroundPosition属性 实现精灵图

• 类名样式操作 ： element.className

 el.className = 'ClassName';

** 样式较多时可以采用ClassName方式来修改元素样式*
** class是保留字 因此使用className来操作元素类名称属性 *
** className 会直接更改元素类名 会覆盖原有类名 可用多个选择器的方式赋值避免 *

排他思想

1. 所有元素清除样式
2. 给自己设置需要的样式

var btns = document.getElementsByTagName('button');
for(var i = 0;i < btns.length ; i++){
    btns[i].onclick = function(){
        for(var j = 0 ;j = btns.length; j++){
            btns[j].style.backgroundColor = '';
        }
        this.style.backgroundColor = 'pink';
    };
}

自定义属性操作

//获取属性值
var div = document.querySelector('div');
//获取自定义属性的值
var attr =div.getAttribute('属性名');
//设置自定义属性 class使用class 而非 className
div.setAttribute('属性名',value);
//移除自定义属性
div.removeAttribute('属性名');

H5自定义属性

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

//设置属性
<div data-index='1'></div>
//获取属性
var result = div.dataset.index

*dataset是一个集合，里面存放了所有data-开头的自定义属性
*data-list-name => div.dataset.listName 自定义属性由多个 - 连接时 获取时使用驼峰命名法拼接
*dataset支持从IE11开始

节点操作

主要用于获取元素
利用节点的层次关系获取元素
主要分 父节点 子节点 兄弟节点 - 父子兄层级关系
*逻辑性强但是兼容性稍差
*节点操作主要操作对象是元素

基本属性

• nodeType 节点类型
• nodeName 节点名称
• nodeValue 节点值

节点类型值	节点类型名称
noteType = 1	元素节点
noteType = 2	属性节点
noteType = 3	文本节点（文本节点包含字符、空格、换行等）

节点类型	节点获取方法	说明
父节点	el.parentNode	获取离元素最近的父节点，如果为找到节点 将返回null
子节点	el.childNodes	获取指定节点的所有子节点集合（包括元素节点、文本节点等） 可通过nodeType对元素节点和文本节点进行区分
子节点	el.children	获取指定元素下的子元素节点 （常用）
子节点	el.firstChild	获取元素下的第一个子节点（包含文本节点 和 元素节点）
子节点	el.lastChild	获取元素下的最后一个节点（包含文本节点 和 元素节点）
子节点	el.firstElementChild	获取元素下的第一个元素子节点 未找到 返回 null IE9+
子节点	el.lastElementChild	获取元素下的最后一个元素子节点 未找到 返回 null IE9+
子节点	el.children[0]	获取元素下的第一个元素子节点 (常用)
子节点	el.children[el.children.length-1]	获取元素下的最后一个元素子节点 （常用）
兄弟节点	el.nextSibling	获取当前节点的下一个兄弟节点 （包含文本节点 和 元素节点）
兄弟节点	el.previousSibling	获取当前节点的上一个兄弟节点 （包含文本节点 和 元素节点）
兄弟节点	el.nextElementSibling	获取当前节点的下一个兄弟元素节点 IE9+
兄弟节点	el.previousElementSibling	获取当前节点的上一个兄弟元素节点 IE9+

创建节点 （动态创建节点）

//创建节点
var li = document.createElement('li');
var ul = document.querySelecter('ul');
//追加元素到最后
ul.appendChild(li);
//创建第二个节点
var lili = document.createElement('li');
//添加节点到指定元素之前  insertBefore(child,指定元素)
ul.insertBefore(lili,li);

删除节点

//删除指定的子节点
 node.removeChild(child);

复制节点 （节点克隆）

// 复制指定的节点 参数为空或者false 浅拷贝 只复制标签 不拷贝内容
var tagNode = node.cloneNode();
// 复制指定的节点 深拷贝 复制标签 内容 和 所有子节点 
var tagNode = node.cloneNode(true);

动态创建元素的区别

创建方式	说明
document.write()	在文档中直接写入标签，文档流执行完毕，会导致页面的全部重绘
element.innerHTML	创建多个元素的过程中将会使用拼接字符串的操作 消耗较多的时间 可以通过数组拼接优化效率
document.createElement()	创建多个的过程中 直接创建元素 效率较高 但是结构清晰

BOM

• BOM(Browser Object Model)：浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象
• BOM由一系列的对象构成，每个对象都提供了很多方法和属性
• BOM缺乏标准
• BOM顶级对象 window 拥有双重角色
  • JS访问浏览器窗口的一个借口
  • 全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
    *window.name是window下的一个特殊属性 默认值为空 须避免使用

window对象的常见事件

事件名称	说明
window.onload	窗口加载事件，当文档内容完全加载完成后会触发该事件（包括图像、脚本、css等）
document.DOMContentLoaded	当DOM元素加载完成之后执行 先与 window.onload执行
window.onresize	当窗口大小变化之后 会触发该事件

定时器

• setTimeout()
  一次性执行 到达延时时间执行一次 默认延时0毫秒

    //设置定时器
    var timer = window.setTimeout(调用函数,[延时时间 毫秒]);
    //停止定时器
    window.clearTimeout(timer);

• setInterval()
  每计时一次 到达延时时间则执行一次

    //设置循环定时器
    var timer = window.setInterval(调用函数,[循环事件 毫秒]);
    //取消循环定时器
    window.clearInterval(timer)；

window.innerWidth 内部窗口宽度

location对象

window对象提供了一个location属性，用于获取或设置窗体的URL，并且可以解析URL。该属性返回的是一个对象，因此也称location对象。

location对象的属性	返回值
location.href	获取或者设置 整个URL
location.host	返回主机名
location.port	返回端口号 未写 返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

location对象方法	返回值
location.assign()	和href一样 可以用于重定向页面
location.replace()	替换当前页面 不记录历史 也不能后退页面
location.reload()	重新加载页面，相当于刷新按钮 或 F5 如设置true参数 则强制刷新 ctrl + F5

URL(Uniform Resource Locator)

统一资源定位符，互联网标准资源的地址，互联网中每个文件都有一个唯一的URL

URL的组成

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

组成部分	说明
protocol	通信协议 常用http、https、ftp、maito等
host	主机名 （域名）
port	端口号 可选 省略时会使用协议的默认端口
path	路径 有0~n个’/'符号分隔的字符串
query	参数 key=value的形式 多个参数通过 '&'符号分隔
fragment	片段 常用语 链接 锚点

navigator对象

navigator对象中包含了很多关于浏览器的信息

常用属性	说明
userAgent	浏览器信息

//区分移动端和PC端
if((navigator.userAgent.match(/(phone|pad|pod|iphone|iPod)/i))){
    //手机端
}else{
    //PC端
}

history对象

与浏览器历史记录进行交互，该对象包含用户访问过的URL

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

---

JS执行机制

JavaScript

• JavaScript是点现场的脚本语言，用于处理页面中的用户交互
• HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程 -> 同步 和 异步
• 同步 ：前一个任务结束之后再执行后一个任务
• 异步 ：前一个任务开始执行之后立即开始执行后一个任务（多个任务同时执行）

同步任务

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

异步任务

JavaScript异步是通过回调函数实现的，将会放入消息队列中（任务队列）

• 普通事件
• 资源加载
• 定时器

*JavaScript会执行同步栈中的任务，将异步任务先放置到任务队列中，当执行栈中的同步任务执行完毕之后，再执行消息队列

---