webapi
JS Web API有哪些？
DOM、BOM、事件绑定、ajax、存储
DOM的本质就是从HTML解析出来的一棵树，是树形的数据结构。
document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖id
document.getElementsByTagName();//标签名
document.getElementsByClassName();//类名
document.getElementsByName();//name属性值，一般不用
document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组
所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型：
Element类型（元素节点）：nodeType值为 1
Text类型（文本节点）：nodeType值为 3
Comment类型（注释节点）：nodeType值为 8
Document类型（document节点）：nodeType值为 9；其规定的一些常用的属性有
document.body document.head 分别为HTML中的 body head
document.documentElement为 html 标签
所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】
通过一些属性可以来遍历节点树
parentNode//获取所选节点的父节点，最顶层的节点为#document
childNodes //获取所选节点的子节点们
firstChild //获取所选节点的第一个子节点
lastChild //获取所选节点的最后一个子节点
nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null
基于元素节点树的遍历（遍历元素节点树）
parentElement //返回当前元素的父元素节点（IE9以下不兼容）
children // 返回当前元素的元素子节点
firstElementChild //返回的是第一个元素子节点（IE9以下不兼容）
lastElementChild //返回的是最后一个元素子节点（IE9以下不兼容）
nextElementSibling //返回的是后一个兄弟元素节点（IE9以下不兼容）
previousElementSibling //返回的是前一个兄弟元素节点（IE9以下不兼容）
DOM 操作
一、节点创建型API
1.1 createElement
1.2 createTextNode
1.3 cloneNode
1.4 createDocumentFragment
二、页面修改形API（包括删除和添加）（删）（改）
2.1 appendChild(追加为子元素)
2.2 insertBefore(插入前面)
2.3 removeChild(删除子元素)
2.4 replaceChild(替换子元素)
三 节点查询型API(查)
3.1 document.getElementById
3.2 document.getElementsByTagName
3.3 document.getElementsByName
3.4 document.getElementsByClassName
3.5 document.querySelector和document.querySelectorAll
3.6 elementFromPoint()
四 元素属性型操作（属性节点的操作）
一般只操作html标签上的属性如id；class之类的；
但是style属性如宽高背景色之类的一般写在css里面所以要通过element.currentStyle : window.getComputedStyle(element,pseduoElement)来操作详细请看BOM笔记
4.1 getAttribute() (获取属性)
4.2 createAttribute() (创建属性)
4.3 setAttribute() (设置属性)
4.4 romoveAttribute() (删除属性)
4.5 element.attributes（将属性生成数组对象）
BOM 浏览器对象模型
navigator.userAgent就是获取浏览器的类型
screen 基本上不用
history.back(); // 浏览器后退
history.forward();// 浏览器前进
location 获取 url 地址信息
hash: ""
host: ""
hostname: ""
href: ""
origin: ""
pathname: ""
port: ""
protocol: ""
reload: ƒ reload()
replace: ƒ replace()
search: ""
事件
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件句柄 (Event Handlers)
事件通常与函数结合使用，函数不会在事件发生前被执行！
标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性。
| 属性 | 描述 |
|---|---|
| bubbles | 返回布尔值，指示事件是否是起泡事件类型。 |
| cancelable | 返回布尔值，指示事件是否可拥可取消的默认动作。 |
| currentTarget | 返回其事件监听器触发该事件的元素。 |
| eventPhase | 返回事件传播的当前阶段。 |
| target | 返回触发此事件的元素（事件的目标节点）。 |
| timeStamp | 返回事件生成的日期和时间。 |
| type | 返回当前 Event 对象表示的事件的名称。 |
标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
| 方法 | 描述 |
|---|---|
| initEvent() | 初始化新创建的 Event 对象的属性。 |
| preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 |
| stopPropagation() | 不再派发事件。 |
事件冒泡、事件捕获和事件委托
事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下事件冒泡和事件捕获：
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件
event.stopPropagation() // 阻止冒泡
ajax
XMLHttpRequest
| 方法 | 说明 |
|---|---|
| open | 请求URL，方法等 |
| send | 发送请求 |
| onreadystatechange | xhr.readyState会从0到4变化 ，请求的状态 |
0 —— （未初始化）还没有调用send()方法
1 —— （载入）已调用send()方法，服务器连接已建立，正在发送请求
2 —— （载入完成） send()方法执行完成，已经接收到全部响应内容
3 —— （交互）正在解析响应内容
4 —— （完成）响应内容解析完成，可以在客户端调用
示例
const xhr = new XMLHttpRequest()
xhr.open('POST', '/login', true)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// console.log(JSON.parse(xhr.responseText))
alert(xhr.responseText)
} else {
console.log('其他情况')
}
}
}
const postData = {
username: 'xxx',
password: 'xxx'
}
xhr.send(JSON.stringify(postData))
同源策略和跨域
同源策略
同源：协议、域名、端口，三者必须一致
加载图片img、css、js可以无视同源策略
跨域方法
jsonp，jsonp就是创建一个script标签，
cors，设置 http 请求 跨域头，Access-Control-Allow-Origin
postMessage
http-proxy -- 常用
websocket
document.domain/window.name/location.hash + iframe -- 不常用
存储
1.localStorage数据会永久存储，除非代码或手动删除
2.sessionStorage数据只存在于当前会话，浏览器关闭则清空
3.cookie 存储大小最大是4KB，http请求时需要发送到服务端，cookie可以跨端口