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

常说的JS（浏览器执行的JS）包含两部分JS基础知识（ECMA 262 标准）JS-Web-API（W3C 标准）JS-Web-API的内容包括DOMBOM事件绑定ajax请求（包括http协议）存储W3C 标准没有规定任何JS基础相关的东西。W3C不管变量类型、原型、作用域和异步，只管定义于浏览器中JS操作页面的API和全局变量。DOMDOM(Document Object Model) 文档对象模型DOM可以理解为：浏览器把拿到的html代码，结构化成浏览器能识别并且JS可操作的一个模型DOM 是哪种基本的数据结构？树DOM 操作的常用API有哪些？获取节点，以及节点的 property 和 attribute获取父节点，获取子节点新增节点，移动节点，删除节点DOM 节点的 attribute 和 property 有何区别？attribute 是对html标签属性的操作property 是对js对象属性的操作BOMBOM(Browser Object Model) 浏览器对象模型如何检测浏览器的类型？// navigatorvar ua = navigator.userAgent;var isChrome = ua.indexOf(‘Chrome’);console.log(isChrome);如何拆解url的各部分？// locationconsole.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’如何获取当前设备的屏幕分辨率？// screenconsole.log(screen.width);console.log(screen.height);浏览器的后退和前进功能？// historyhistory.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.open(‘GET’, ‘http://api.douban.com/v2/movie/top250', false); // false => 异步xhr.onreadystatechange = function () { // 这里的函数异步执行 if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } }};xhr.send(null);状态码说明readyState0 - (未初始化) 还没有调用send()方法1 - (载入) 已调用send()方法，正在发送请求2 - (载入完成) send()方法执行完成，已经接收到全部响应内容3 - (交互) 正在解析响应内容4 - (完成) 响应内容解析完成，可以在客户端调用了status http状态码2xx - 表示成功处理请求。如2003xx - 需要重定向，浏览器直接跳转4xx - 客户端请求错误，如4045xx - 服务端错误跨域什么是跨域？浏览器有同源策略，不允许ajax访问其他域的接口跨域条件：协议、域名、端口，有一个不同就算跨域跨域的几种实现方式？前端：JSONP，vue proxyTable设置代理服务器端：设置 http headerJSONP简单示例<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，localStorageHTML5 专门为存储而设计，最大容量5MAPI简单易用sessionStorage.setItem(key, value);sessionStorage.getItem(key);sessionStorage：浏览器关闭清空数据localStorage：只要不手动清空，就一直在