【JS基础】DOM，BOM，事件绑定，ajax，跨域，存储

常说的JS（浏览器执行的JS）包含两部分

1. JS基础知识（ECMA 262 标准）
2. JS-Web-API（W3C 标准）

JS-Web-API的内容包括

DOM
BOM
事件绑定
ajax请求（包括http协议）
存储

W3C 标准没有规定任何JS基础相关的东西。W3C不管变量类型、原型、作用域和异步，只管定义于浏览器中JS操作页面的API和全局变量。

DOM

DOM(Document Object Model) 文档对象模型
DOM可以理解为：浏览器把拿到的html代码，结构化成浏览器能识别并且JS可操作的一个模型

DOM 是哪种基本的数据结构？

树

DOM 操作的常用API有哪些？

获取节点，以及节点的 property 和 attribute
获取父节点，获取子节点
新增节点，移动节点，删除节点

DOM 节点的 attribute 和 property 有何区别？

attribute 是对html标签属性的操作
property 是对js对象属性的操作

BOM

BOM(Browser Object Model) 浏览器对象模型

如何检测浏览器的类型？

// navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);

如何拆解url的各部分？

// location
console.log(location.href); // 整个地址
console.log(location.protocol); // 协议 'http:' 'https:'
console.log(location.host); // 域名 '172.24.1.99'
console.log(location.pathname); // path '/home/subject'
console.log(location.search); // '?uid=99'
console.log(location.hash); // '#mid=100'

如何获取当前设备的屏幕分辨率？

// screen
console.log(screen.width);
console.log(screen.height);

浏览器的后退和前进功能？

// history
history.back();  // 后退
history.forward();  // 前进

事件绑定

事件冒泡的过程？

事件冒泡是指，触发内层的事件之后，事件会按照DOM的树形结构像水泡一样不断的向上触发直至顶端。

示例：

<div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
</div>
<div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
</div>

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn);
}

// 冒泡的应用
var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1, 'click', function (e) {
    e.stopPropagation();
    alert('激活');
});
bindEvent(body, 'click', function (e) {
    alert('取消');
});

对于一个无限下拉加载图片的页面，如何给每个图片绑定事件？

<div id="div3">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <!--会随时新增更多 a 标签-->
</div>

// 使用代理
var div3 = document.getElementById('div3');
div3.addEventListener('click', function (e) {
    var target = e.target;
    if (target.nodeName === 'A') {
        alert(target.innerHTML);
    }
});

一个通用的事件监听函数（通用事件绑定）

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type, function (e) {
        var target;
        if (selector) {
            target = e.target;
            if (target.matches(selector)) {
                fn.call(target, e);
            }
        } else {
            fn(e);
        }
    });
}

// 使用代理
var div1 = document.getElementById('div1');
bindEvent(div1, 'click', 'a', function (e){
    console.log(this.innerHTML);
});

// 不使用代理
var a1 = document.getElementById('a1');
bindEvent(a1, 'click', function (e){
    console.log(a1.innerHTML);
});

ajax

手动编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // 这里的函数异步执行
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
};
xhr.open('get', 'http://api.douban.com/v2/movie/top250', true); // 默认就为true => 异步
xhr.send(null);

状态码说明

readyState
0 - (未初始化) 还没有调用send()方法
1 - (载入) 已调用send()方法，正在发送请求
2 - (载入完成) send()方法执行完成，已经接收到全部响应内容
3 - (交互) 正在解析响应内容
4 - (完成) 响应内容解析完成，可以在客户端调用了

status http状态码
2xx - 表示成功处理请求。如200
3xx - 需要重定向，浏览器直接跳转
4xx - 客户端请求错误，如404
5xx - 服务端错误

跨域

什么是跨域？

浏览器有同源策略，不允许ajax访问其他域的接口
跨域条件：协议、域名、端口，有一个不同就算跨域

跨域的几种实现方式？

前端：JSONP，vue proxyTable设置代理
服务器端：设置 http header

JSONP简单示例

<script>
    window.callback = function (data) {
        // 这是我们跨域得到的信息
        console.log(data);
    }
</script>
<script src="http://www.yourname.com/api.js"></script>
<!--以上将返回 callback({x:100.y:200})-->
<!--模拟调用了js的callback方法-->

可以跨域的标签？

<img> 用于打点统计，统计网站可能是其他域
<link> <script> 可以使用CDN，CDN的也是其他域
<script> 可以用于JSONP

跨域注意事项：
所有的跨域请求都必须经过信息提供方允许。如果未经允许即可获取，那是浏览器同源策略出现了漏洞。

存储

描述 cookie,sessionStorage,localStorage 的区别？

1.容量不同
2.是否会携带到ajax中
3.API的易用性

cookie

本身用于客户端和服务端通信
但是它有本地存储的功能，于是就被“借用”
使用 document.cookie = ... 获取和修改即可

cookie用于存储的缺点

存储量太小，只有4KB
所有http请求都带着，会影响获取资源的效率
API过于简单，需要封装才能用 document.cookie = ...

sessionStorage，localStorage

HTML5 专门为存储而设计，最大容量5M
API简单易用
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage：浏览器关闭清空数据
localStorage：只要不手动清空，就一直在