这篇主要是说JS的一些api，其中包括DOM，BOM，事件，ajax，存储，都是实际开发会用到的，但是这些都是JS的哦，不涉及jquery，vue框架等。
一、DOM操作
知识点
1. 事件模型
- 捕获
- 冒泡
2. 事件流
- 捕获用户行为 -> 目标阶段 -> 冒泡
- 捕获的具体流程：
window -> document -> html -> body -> 元素之间的传递
冒泡是从下往上
3. Event对象的常见用法
- 阻止冒泡：event.stopPropagation()
- 阻止默认行为：event.preventDefault()
- 同一个元素绑定多个事件，点击哪个执行哪个：event.stopImmediatePropagation()
- 绑定当前事件的元素：event.currentTarget（事件代理时候会用）
- 当前被点击的元素：event.target（事件代理时候会用）
4. DOM结构操作
- 新增节点
var p = document.createElement('p')
p.innerHTML = 'new P';
var div1 = document.getElementById('div1');
div1.appendChild(p);
- 移动节点
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
- 获取父元素，获取子元素
var div1 = document.getElementById('div1');
console.log(div1.parentNode);
console.log(div1.childNodes);
- 删除节点
var div1 = document.getElementById('div1');
div1.removeChild(div1.childNodes[1]);
问题
1. DOM是哪种基本的数据结构
树型结构
2. DOM操作常用的api有哪些
- 获取及修改attribute、property
- 上面说的DOM结构操作
- 添加节点
- 移动节点
- 删除节点
- 获取子节点
- 获取父节点
3. DOM中attr和property有何区别
attribute是对html标签属性的修改
property是对一个JS对象的属性的修改
二、BOM操作
1. 检测浏览器类型
navigator.userAgent
2. url不同部分的拆解
在控制台通过location去查看对象有哪些属性
如下图：
location.png
3. history
- history.back()
4. screen
- screen.width（屏幕宽度）
- screen.height（屏幕高度）
三、事件
1. 编写一个通用的事件监听
function bindEvent(ele, type, selector, fn) {
// 没有事件代理时，将第三个参数赋值给fn
if (fn == null) {
fn = selector;
selector = null;
}
ele.addEventListener(type, function (e) {
var target = e.target;
if (selector) {
// 使用事件代理
if (target.matches(selector)) {
fn.call(target, e);
}
} else {
// 不使用事件代理
fn(e);
}
});
}
2. 事件冒泡
- DOM树型结构
- 事件逐层冒泡
- 阻止事件冒泡
- 因为有事件冒泡，所以有事件代理
3. 对于一个有无限下拉的图片的操作，怎么给每个图片绑定事件
- 使用事件代理
- 什么是事件代理
就是给父元素绑定事件，子元素和父元素都会有这个事件 - 使用代理的好处：
- 代码简洁
- 减少浏览器内存消耗
四、ajax及http
知识点
1. readyState
- 0 -（未初始化）还没有调用send方法
- 1 -（载入）已经调用send方法，正在发送
- 2 - （载入完成）已经发送完成，send执行完成，已经接受到全部相应内容
- 3 - （交互）正在解析响应内容
- 4 - （完成）解析响应内容完成，客户端可以调用了
2. status
- 1xx - 请求已接收，继续处理
- 2xx - 表示处理成功，如200
- 200：客户端请求成功
- 206：客户端发送了一个带有Range的GET请求头，服务器完成了他（video，audio）
- 3xx - 需要重定向，浏览器直接跳转
- 301：已经转移到新的url
- 302：临时转移到了新的url
- 304：缓存
- 4xx - 客户端请求错误，如404
- 400：客户端有语法错误
- 401：请求未授权（参数和方式可能错误）
- 403：资源禁止被访问
- 404：资源不存在
- 5xx - 服务端错误
- 500：服务器错误
- 503：服务器宕机或者过载
3. 跨域
-
什么是跨域
浏览器会有同源策略，域名，协议，端口只要有一个不同就是跨域- 协议：http，https
- 端口：http协议默认是80，https默认是443
-
可以跨域的三个标签
- img：（如果图片不做防盗链，是可以在其他的域名下访问），可以用作打点统计，统计的网站是其他域
- link：因为不受跨域限制，所以可以使用CDN链接
- script：可以使用CDN链接，可以使用JSONP
4. http的特点
- 简单快速
- 灵活
- 无连接
- 无状态
问题
1. 手动编写一个ajax，不依赖其他库
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
alert(xhr.responseText);
}
}
}
xhr.send(null)
2. 跨域的几种实现方式
- JSONP
- 服务端设置头信息CORS
3. POST和GET的区别
- GET请求浏览器回退是无害的，但是POST会重新发送请求
- GET产生的地址会被收藏，但是POST不会
- GET会被浏览器主动缓存，而POST的不会，需要手动设置
- GET请求只能进行url编码，而POST支持多种编码方式
- GET请求的参数会被完整保留到历史记录里，POST参数不会保存
- GET请求在url中传送的参数有长度限制，POST没有
- 对参数的数据类型，GET只接受ASCII字符，POST没有限制
- GET参数会暴露在url中，不要放敏感信息
- GET参数通过url传递，POST通过request body中
五、存储
描述一下cookie，localStorage，sessionStorage的区别
- 容量：cookie是4KB，storage是5M
- API不同：cookie需要自己封装，但是storage不需要，有现成的api
- cookie可以用于客户端和服务端交互
