JS Web API

DOM
BOM
事件绑定
Ajax
存储

1. DOM 文档对象模型

DOM的本质

HTML 是一种特定的 XML，DOM是浏览器解析HTML生成的一种类似于树的结构。

DOM节点操作

获取DOM节点
attribute
property

document.getElementById / document.querySelector

DOM元素的属性（property）是该对象所拥有的属性，而特性（attribute）则是该元素在HTML中的所拥有的特性节点。property是对象属性，本身不操作特性节点，但可以覆盖HTML中的同名特性的效果，是js操作；attribute是DOM节点对象，只用于获取和设置HTML特性，是文本操作。

DOM的性能

避免频繁的DOM操作
对DOM查询做缓存

/*创建一个frag文档片段，这个文档片段并没有插入到DOM树中，
因为这个frag还没有进入DOM，刚被创建。都完成之后再插入DOM，这样就只需要插入一次DOM*/

2. BOM 浏览器对象模型

如何识别浏览器的类型
分析拆解url各个部分
navigator
screen
location
history

navigator.userAgent

3. 事件

事件绑定
事件冒泡
事件代理

**手写一个事件绑定函数 **

简单版本

function bindEvent(element, eventType, callBack){
    element.addEventListener(eventType, callBack)
}

完整版

事件冒泡比较简单，联系到为什么React16中阻止事件冒泡无效。
因为React16把事件绑定到document上，React17绑定到root容器上。
React16事件冒泡到document的时候才触发stopPropagation，这时候DOM上的事件已经被触发了。可以使用React.nativeEvent.stopImmediatePropagate

事件代理

给每个a标签绑定事件太消耗性能，直接统一绑定到div容器上，利用冒泡的特性，加上一个判断
target.nodeNmae === 'A' 就可以实现事件委托/事件代理。

4. Ajax

题目

手写一个简易的ajax
跨域的常用实现方式

知识点

XMLHttpRequest
状态码
跨域：同源策略，跨域解决方案

XMLHttpRequest

演示GET请求
图中xhr.onreadystatechange第三个参数更正为true

const xhr = new XMLHttpRequest()
// true表示异步
xhr.open('GET', '/api', true)
xhr.onreadystatechange() = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            alert(xhr.responseText)
        }else{
            console.log('其他情况' )
        }
    }
}
xhr.send(null)