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事件
事件有三部分组成：事件源，事件类型，事件处理程序
事件源：谁？即事件被触发的对象，按钮
事件类型：如何触发？如鼠标点击
事件处理程序：通过函数赋值方式完成
执行事件步骤：
- 获取事件源
- 绑定事件
- 添加事件处理程序（采取函数赋值形式）
常见鼠标事件：
| 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后退一个页面 |