Web APIs

JS组成：ECMAScript（js基础语法），DOM(Web APIs)，BOM(Web APIs)

因此，Web APIs包括DOM（文档对象模型）和BOM（浏览器对象模型），它是W3C组织的标准。
是浏览器提供的一套浏览器功能和和元素的API，用来和网页进行交互，是js的应用。

一：DOM

文档对象模型，是处理可拓展标记语言（html和xml）的标准编程接口。
W3C已经定义看一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

1.1DOM树

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

1.2获取元素
document.getElementById()
//返回的是一个元素对象
拓展：可用console.dir() 查看返回的结果，更方便查看属性和方法
document.getElementsByTagName()
//返回含有指定标签名的元素对象集合，以伪元组的形式存储，可用for遍历其中的元素对象。其还可以获取某个元素内部的所有指定标签名的子元素，但父元素必须是单个对象
doucument.getElementsByClassName('类名')
h5新增的方法，返回对象集合
document.querySelector('选取器')
根据指定选择器，返回第一个选中的元素对象
document.querySelectorAll('选取器')
返回指定选择器的所有元素对象集合
特殊元素获取
document.body() //获取body元素对象
document.docuementElement() //获取html元素对象

1.3事件
事件有三部分组成：事件源，事件类型，事件处理程序
事件源：谁？即事件被触发的对象，按钮
事件类型：如何触发？如鼠标点击
事件处理程序：通过函数赋值方式完成
执行事件步骤：

1. 获取事件源
2. 绑定事件
3. 添加事件处理程序（采取函数赋值形式）
   常见鼠标事件：
   | onclick | 鼠标点击左键触发 |
   | ----------- | ---------------- |
   | onmouseover | 鼠标经过触发 |
   | onmouseout | 鼠标离开触发 |
   | onfocus | 获得鼠标焦点触发 |
   | onblur | 失去鼠标焦点触发 |
   | onmousemove | 鼠标移动触发 |
   | onmouseup | 鼠标弹起触发 |
   | onmousedown | 鼠标按下触发 |

1.4操作元素

• 改变元素内容
  element.innerText:不识别html标签，去除空格和换行
  element.innerHTML:识别html标签，w3c推荐标准，保留空格和换行
  eg:div.innerText = '你好啊' //原样输出
  eg:div.innerHTML = '你好啊' //你好啊三个字加粗
• 修改表单元素
  input.value ='值'；//innerHTML是普通盒子（如div）才有的，表单元素没有该属性，这里的input是获取的input元素对象
  DOM可操作如下表单元素的属性：
  type,value,checked,selected,disabled
• 修改元素属性
  元素对象.属性名 = 属性值
• 修改样式属性
  element.style 行内样式操作
  element.className 类名样式操作
  eg：div[0].style.backgroundColor = 'yellow'
  注意：js中的样式采用驼峰命名法，如：frontSize,backgroundColor

注：在事件处理函数中，this可指代事件函数的调用者
元素.style.display = 'none'; //隐藏元素

• 获取自定义属性
  element.属性名 //用于获取内置属性（元素本身自带的属性）
  element.getAttribute(‘属性’) //主要获取自定义属性
  注：html5新规范中规定，自定义属性以data-开头

• 设置元素属性
  element.属性名 = 属性值 //div.className = 'foot'
  element.setAttribute('属性','值') //div.setAttribute('class','foot')
  element.removeAttribute('index') //移除属性

1.5节点操作

1.5.1 网页中所有内容都是节点（元素，注释，文本等），在DOM中，节点使用node表示。可利用父子兄弟关系来获取素。
一般地，节点至少有nodeType，nodeName，nodeValue这三个基本属性。

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包括文字，空格和换行）

1.5.2 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄弟关系。
父级节点：node.parentNode //得到的是离元素最近的父亲节点，找不到返回空
子元素节点：node.children //只得到元素节点
第一个元素节点：node.firstElementChild //i9以上才支持
最后一个元素节点：node.lastElementChild
下一个元素兄弟节点：node.nextElementSibling //i9以上才支持
上一个元素兄弟节点：node.previousElementSibling //i9以上才支持
以下几种方法作为了解
子节点：node.childNodes //得到列表，包括换行符和空格
第一个子节点：node.firstChild //会获取换行和空格文本节点
最后一个子节点：node.lastChild
下一个兄弟节点：node.nextSibling //包括文本节点和元素节点
上一个兄弟节点：node.previousSibling //包括文本节点和元素节点

eg:var ul = document.querySelector('ul');
var li = ul.childNodes

1.5.3创建节点
语法：document.createElement('')
1.5.4添加节点
语法1：node.appendChild(child) //将一个节点添加到指定父节点的子节点列表末尾
语法2：node.insertBefore(child,指定元素) //将一个节点添加到父节点中指定的子节点前
eg:
var li = document.createElement('li')
var ul=document.querySelector('ul')
ul.appendChild(li)
1.5.5删除节点
语法：node.removeChild()
1.5.6复制节点
语法：node.cloneNode() //括号中为空或false，只克隆节点本身，不复制其中的内容

总结：
创建元素的三种方式：
document.write() //如页面文档流加载完毕再调用这句话，会导致页面重绘
document.innerHTML()
document.createElement() //创建多个元素时，效率较高

1.6 事件高级
注册事件
注册事件有两种方式：传统注册事件，方法监听注册方式
传统注册事件：以on开头，同一个元素同一个事件只能设置一个处理函数
方法监听注册方式：addEventListener() //该方法ie9之前不支持
addEventListener(type，listener[,useCapture])
type：事件类型字符串，如：click，mouserover
listener：事件处理函数，事件发生时会调用该函数
useCapture：布尔值，默认为false
eg：btns[1].addEventListener('click',function(){alert(22);})
事件对象
eg：div.onclick = function(event){}
该举例中的event就是一个事件，可当作形参来对待，事件对象只在有事件时才会存在。它是系统自动创建的，不需要我们传递参数。
事件对象 是事件相关数据的集合 （比如判断用户按下了哪个键）
e.target和this区别
e.target指向触发事件的对象（元素）
this指向绑定事件的对象

二：BOM

BOM是浏览器对象模型，它是独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。
BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

2.1 window对象
它是JS访问浏览器窗口的一个接口。
是全局对象，定义在全局作用域中的变量，函数都会自动变成window的属性和方法。

2.2window对象的常见事件

• 页面加载事件
  window.onload = function(){}或
  window.addEventListener('load',function(){})
  document.addEventListener('DOMContentedLoaded',function(){})

window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等）
window.onload传统注册方式只能写一次，如有多个，会以最后一个window.onload为准；
如使用addEventListener则没有限制;
DOMContentedLoaded仅当DOM加载完成，不包括样式表，图片，flash等，ie9以上才支持。

• 调整窗口大小事件
  window.onresize = functiong(){}
  window.addEventListener('resize',function(){})
  窗口尺寸发生变化即会触发

• 定时器
  setTimeout(调用函数[,延迟毫秒数]) //毫秒数省略时默认是0
  window.clearTimeout(定时器名字) 停止定时器
  setInterval(调用函数[,间隔毫秒数]) //每隔一段时间，就调用函数
  clearInterval（定时器名字）
  window可以省略

2.3JS执行机制
js中有同步任务和异步任务两种。
同步任务都在主线程上执行，形成一个执行栈。
异步任务则通过回调函数来实现。异步任务相关回调函数添加到任务队列中。一般而言，异步任务有如下三种：

• 普通事件，如click，resize等
• 资源加载，如load，error等
• 定时器，包括setInterval，serTimeout等

JS会先执行执行栈中的任务，再去任务队列中执行异步任务

2.4Location对象

location对象属性	返回值
location.href	获取或设置URL
location.host	返回域名
location.port
location.pathname
location.search	返回参数
location.hash	返回片段，#后面内容
location.assign()	同href一样，可以跳转页面,记录浏览历史
location.replace()	替换当前页面，因不记录历史，多以不能后退页面
location.reload()	重新加载页面

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

2.6 history对象
history对象包含用户（在浏览器窗口中）访问过的URL，即能与浏览器历史记录进行交互。

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