JS和WEB

写在前面的话：

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

1.JS基础知识：ECMA 262标准

 2.JS-WEB-API：W3C标准

W3C标准中关于JS的规定有：

1.DOM操作

2.BOM操作

3.事件绑定

4.Ajax请求（包括HTTP协议）

5.存储

DOM

我们看到这个很熟，谁知道全名又是什么呢？你知道吗？

dom：Document Object Model文档对象模型学习使用文档对象模型（Document Object Model, DOM），使用这种树 API 可以直接访问 XML 文档的各个部分。DOM 可能是最为流行的 XML 文档访问方式，它通过损失性能实现了访问的便利性。Document Object Model (DOM) [W3C 推荐标准] 是一种用于 XML 文档的对象模型，可用于直接访问 XML 文档的各个部分。在 DOM 中，文档被模拟为树状，其中 XML 语法的每个组成部分（例如元素或文本内容）都被表示为一个节点。作为一种 API，DOM 允许您遍历文档树，从父节点移动到子节点和兄弟节点等，并利用某种节点类型特有的属性（元素具有属性，而文本节点具有文本数据）。DOM 被设计为与语言无关。OMG（Object Management Group, 对象管理组）的 CORBA Interface Definition Language (IDL) [ISO 国际标准，编号 14750] 可用于表示 DOM 节点和支持接口。DOM 最初源于 Web 浏览器中对 HTML 和 XML 对象标准化脚本操作的对象模型。某些情况下，当将它作为独立的编程 API 时，使用起来有些笨拙，而本文主要讨论的就是这种用法。DOM 的发展经历了不同级别，每一级别在前一级别基础上添加了新功能。级别 1 涵盖了基本功能；级别 2 添加了名称空间支持、UI 事件模型、迭代器等功能；级别 3 添加了可从 XML 文档文件进行加载和保存的 API，并集成了 XPath，添加了验证支持等。通常，DOM 比 Simple API for XML (SAX) 更容易掌握，因为它没有涉及回调和复杂的状态管理。然而，DOM 的实现常常将所有 XML 节点保持在内存中，这使较大的文档变得效率低下。尽管许多语言都提供了 DOM 的实现，但是 DOM 试图实现与语言无关，这使得其他语言的追随者经常抱怨 DOM 非常笨拙且不能利用任何语言的专长。因此，涌现出众多特定于语言的树 API。

DOM节点操作

查找元素：document.getElementById==通过id 查找元素， document.getElementsByTagName==通过元素标签查找元素，document.getElementsByClassName==通过Class 查找元素，document.querySelectorAll==查找所有元素。

property：修改的是JS对象的标准属性

attribute：修改获取的是HTML文档中标签的属性

DOM结构操作：

BOM操作（Browser Object Model)：

事件：

    1.编写一个通用的事件监听函数

    2.描述事件冒泡流程

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

        通用事件绑定：（IE低版本使用 attachEvent 绑定事件，和 w3c 标准不一样）

事件冒泡

按照DOM树形结构，由子级到祖级的顺序传播

案例：点击p1弹出激活，点击其他的弹出取消

    事件代理：事件代理就是在祖级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖级DOM的事件。

    完善通用绑定事件函数

代理的好处

    1.代码简洁

    2.减少浏览器内存占用（因为绑一次事件浏览器会计一次）

Ajax

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

    2.跨域的几种实现方式

        XMLHttpReaquest：

            readyState：   

                    0 - （未初始化）还没有调用 send() 方法 

                    1 - （载入）已调用 send() 方法，正在发送请求 

                    2 - （载入完成）send() 方法执行完成，已经接收到全部响应的内容 

                    3 - （交互）正在解析相应内容 

                    4 - （完成）响应内容解析完成，可以在客户端调用了 

            status ：

                    2xx - 表示成功处理请求。如 200 

                    3xx - 需要重定向，浏览器直接跳转 

                    4xx - 客户端请求错误，如 404 

                    5xx - 服务器端错误

            跨域：

                浏览器有同源策略，不允许 ajax 访问其他域接口

                 条件：协议、域名、端口、有一个不同就算跨域

            可以跨域的三个标签：img ，link ，script 

                    img 用于打点统计，统计网站可能是其他域，无兼容性问题；

                    link script 可以使用CDN，script 可用于 JSONP

           JSONP 实现原理：

             服务器端设置 http header：

存储：

    cookie， sessionStorage 和 localStorage 的区别：

            cookie：本身用于客户端和服务器端通信但是它有本地存储功能，于是就被“借用”使用 document.cooki = ... 获取和修改即可会携带到 ajax 中用于存储的缺点：存储量太小，只有4kb所有 http 请求都带着，会影响获取资源的效率API 简单，需要封装才能使用 document.cookie = ...

            locationStorage 和 sessionStorage：HTML5 专门为存储设计，最大容量 5M不会携带到 ajax 中API 简单易用：localStorage.setItem(key,value);localStorage.getItem(key);区别：sessionStorage 如果浏览器关闭会自动清理