5.JS-Web-API
讲解 JS 在浏览器中具体应用的面试题。包括 DOM 操作，BOM 操作，事件绑定，ajax 和 存储，这些类别的题目。
5.1从基础知识到JS-Web-API
JS基础知识：
1.变量类型和计算
2.原型和原型链
3.闭包和作用域
4.异步和单线程
5.其他（如日期、Math、各种常用API）
JS-Web-API：
JS基础知识：ECMA 262标准
JS-Web-API：W3C标准
W3C标准中关于JS的规定有：
1.DOM操作
2.BOM操作
3.事件绑定
4.ajax请求（包括http协议）
5.存储
W3C标准没有规定任何JS基础相关的东西，不管什么变量类型、原型、作用域和异步。这些是ECMA标准管的。W3C只管定义用于浏览器中JS操作页面的API和全局变量。
JS内置的全局函数和对象有哪些？
1.之前讲过的Object、Array、Boolean、String、Math、JSON等
2.刚刚提到的window、document
3.等等，很多
常说的JS（浏览器执行的JS）包含两部分：
1.JS基础知识（ECMA262标准）
2.JS-Web-API（W3C标准）
5.2DOM本质
题目：
1.DOM是哪种基本的数据结构？
2.DOM操作的常用API有哪些？
3.DOM节点的attr和property有何区别？
知识点：
DOM的本质
DOM节点操作
DOM结构操作
DOM的本质
DOM的本质是一种树，所以DOM是树这种数据结构。
DOM可以理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型。
5.3DOM节点操作
1.获取DOM节点
2.prototype
3.Attribute
1.获取DOM节点
getElementById('div1')
getElementByClassName('.container')
getElementByTagName('div') //集合
querySeletorAll('p') //集合
说一下getElementByTagName和querySelector的区别：
参考文章：
https://blog.csdn.net/tja8N2m2G46OMtF/article/details/80205248
https://blog.csdn.net/levinhax/article/details/71274456
https://blog.csdn.net/erciyuan_nuonuo/article/details/53998706
注意：getElementByTagName、querySeletorAll和childNodes(包含空格)获取集合的区别
<div id="div1">
<p id="p1">this is p1</p>
<p id="p2">this is p2</p>
</div>
<script type="text/javascript">
var div1 = document.getElementById('div1')
console.log(div1.childNodes)
</script>
输出结果：
这种可以通过nodeType进行解决：
element nodetype 1
text nodetype 3
参考文章：https://blog.csdn.net/zwkkkk1/article/details/80229923
2.property
var pList = document.querySeletorAll('p')
var p = pList[0]
console.log(p.style.width) //获取样式
p.style.width = '100px' //修改样式
console.log(p.className) //获取class
p.className = 'p1' //修改class
//获取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)
3.Attribute
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','imooc')
p.getAttribute('style')
p.setAttribute('style','font-size:30px')
JS中attribute和property的区别：
1.property是DOM中的属性，是JavaScript里的对象；
2.attribute是HTML标签上的特性，它的值只能够是字符串；
简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。
而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。
参考文章：http://www.cnblogs.com/lmjZone/p/8760232.html
5.4DOM结构操作
var p = document.createElement('p')
p.innerHTML = '_new _p'
var div1 = document.getElementById('div1')
div1.appendChild(p)
p标签的移动（DOM结构的移动）：
JavaScript中插入HTML方法：
1.document.write
2.innerHTML
3.DOM方法
具体可以参考：https://blog.csdn.net/u014465934/article/details/87915153
1.DOM是哪种基本的数据结构？
树
2.DOM操作的常用API有哪些？
获取DOM节点，以及节点的property和Attribute
获取父节点，获取字节点
新增节点，删除节点
3.DOM节点的attr和property有何区别？
Attribute是对HTML标签属性的修改
property是一个JS对象的属性的修改
5.5BOM操作
BOM：Browser Object Model
题目：
如何检测浏览器的类型
拆解url的各部分
知识点：
window（Window 对象表示浏览器中打开的窗口。）
navigator（返回当前浏览器的信息）
screen（返回有关屏幕大小宽高以及颜色深度等信息）
location（操作刷新按钮和地址栏）
history（操纵浏览器记录）
可以参考资料：http://www.w3school.com.cn/jsref/dom_obj_window.asp
location.host 域名
如何检测浏览器的类型：
navigator.userAgent
拆解url的各部分：
location.href
location.protocol
location.pathname
location.search //search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
location.hash //返回一个URL的锚部分
可以查看资料：http://www.runoob.com/jsref/obj-location.html
6.JS-Web-API
6.1事件
题目：
1.编写一个通用的事件监听函数
2.描述事件冒泡流程
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
知识点：
1.通用事件绑定
2.事件冒泡
3.代理
通用事件绑定
1.编写一个通用事件绑定函数
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
console.log('click')
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
e.preventDefault() //阻止默认行为
alert('clicked')
})
IE低版本使用attachEvent绑定事件，和W3C标准不一样。
事件冒泡
stopPropagation() 方法：
不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
对于上面代码就是，冒泡到body如果不进行设置，body绑定了click事件，会触发alert('取消')，所以要设置stopPropatation()
DOM事件应用：代理
添加target.nodeName === 'A'是为了防止点击a旁边时候弹出alert框。例如下面，因为a是内联元素，所以如果不添加这一行代码，会在点击红圈圈出来地方时候，弹出body下整个innerHTML的内容。
完善通用绑定事件的函数
上面函数兼任不传入selector参数的情况。
关于call用法，看一个示例：
//定义一个add 方法
function add(x, y) {
return x + y;
}
//用call 来调用 add 方法
function myAddCall(x, y) {
//调用 add 方法 的 call 方法
return add.call(this, x, y);
代理的好处：
1.代码简洁
2.减少浏览器内存占用
描述事件冒泡流程
DOM树形结构（因为DOM树形结构，说明事件冒泡依据）
事件冒泡
阻止冒泡
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理
知道代理的两个优点
重点总结
通用事件绑定
事件冒泡
代理
6.2Ajax-XMLHttpRequest
题目：
1.手动编写一个ajax，不依赖第三方库
2.跨域的几种实现方式（原理）
知识点：
XMLHttpRequest
状态码说明
跨域
XMLHttpRequest
题目：手写编写一个ajax，不依赖第三方库
var xhr = new XMLHttpRequest()
// false是说明是异步
xhr.open('GET','/api',false)
xhr.onreadystatechange = function(){
//这里的函数异步执行，可参考之前JS基础中的异步模块
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
IE兼容性问题：
IE低版本使用ActiveXObject，和W3C标准不一样
状态码说明
0 （未初始化）还没有调用send()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入成功）send()方法执行完成，已经接收到全部响应内容
3 （交互）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
6.3Ajax-跨域和问题解决
什么是跨域
JSONP
服务器端设置http header
跨域
浏览器有同源策略，不允许ajax访问其他域接口
可以跨域的三个标签
但是有三个标签允许跨域加载资源：
1.img <img src="">
2.link <link href="">
3.script <script src=xxx>
三个标签的应用场景：
1.<img>用于打点统计，统计网站可能是其他域
2.<link><script>可以使用CDN，CDN的也是其他域
3.<script>可以用于JSONP，马上讲解
跨域注意事项
1.所有的跨域请求都必须经过信息提供方允许
2.如果未经允许即可获取，那是浏览器同源策略出现漏洞
同理，请求api.js时候不一定是得有api.js。
JSONP
<script>
window.callback = function(data){
//这是我们跨域得到信息
console.log(data)
}
</script>
<script src="http://coding.m.imooc.com/api.js"></script> //将返回callback({x:100,y:200})
服务器端设置http header
另一个解决跨域的简洁方法，需要服务器端来做
但是作为交互方，我们必须知道这个方法
是将来解决跨域问题的一个趋势
跨域的几种实现方式（原理）
JSON
服务器端设置http header
重点总结
XMLHttpRequest
状态码说明
跨域
6.4存储
请描述一下cookie、sessionStorage和localStorage的区别？
容量（cookie 4KB，localStorage 2.5-10M）
是否会携带到ajax中（cookie会携带到ajax中，sessionStorage、localStorage两个不会）
API易用性（后者两个易用）
知识点：
1.cookie
2.sessionStorage和localStorage
3.indexDB
cookie
本身用于客户端和服务器端通信
但是它有本地存储的功能，于是就被“借用”
使用document.cookie=...获取和修改即可
cookie用于存储的缺点：
1.存储量太小，只有4KB
2.所有http请求都带着，会影响获取资源的效率
3.API简单，需要封装才能用document.cookie = ...
sessionStorage和localStorage
1HTML5专门为存储而设计，最大容量5M
2.API简单易用
localStorage.setItem(key,value);
localStorage.getItem(key);
3.浏览器关闭sessionStorage数据会丢失，localStorage不会，清除浏览器缓存, localStorage会被删除
4.LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。
5.IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。
indexDB
IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。
缓存作为一种非常常见的优化手段，不管是前端还是后端都能够经常用到,
后端的缓存方案, 就是redis、memcached这类的
前端的话 可能更多的是http cache 缓存一些静态资源
缓存运用的好是可以大大提升运行速度，提升用户体验的.
indexDB用来做一些数据的缓存，为什么要选用indexDB来做缓存而不是选用其他H5的存储方式呢？
1持久化限制
sessionStorage关闭浏览器后就会自动清除掉
清除浏览器缓存, localStorage会被删除
2.存储限制
localStorage 单个domain5M 各个浏览器会有所不同
indexDB支持多种数据格式，持久化存储、支持事务、游标、索引等数据库操作,同时indexDB的存储空间大, 一般浏览器会分配50M-250M不等
现在主要做的项目是关于车辆数据及追踪的SaaS平台，对于indexDB的缓存主要可以用于一些gps数据的缓存、地理位置逆转码的缓存.
参考文章：
https://www.jianshu.com/p/105fcdcc3fbb
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
https://www.cnblogs.com/dolphinX/p/3415761.html