JavaScript重点知识（二）

三.JS的API

3.1知识点（DOM）

1）DOM本质

• 将html结构化成浏览器和JS可识别可操作的东西

2）变量计算---强制类型转换

• 获取DOM节点
• Attribute（对html标签属性的修改）
• prototype（对JS对象的属性修改）

3）DOM结构操作

• 增加DOM节点  .appendChild( )
• 获取父元素  .parentElement
• 获取子元素  .childNode
• 删除节点  .removeChild( )

3.2知识点（BOM）

1）navigator

• .userAgent

2）screen

• .width
• .height

3）location

• .href
• .protocal
• .host
• .pathname
• search
• .hash

4）screen

• .back( )
• .forward( )

3.3知识点（事件绑定）

1）通用事件绑定

• .addEventlistener('事件',函数)

2）事件冒泡

• event.stopPropagation( )

3）取消默认

• event.preventDefault( )

4）代理

• var target = e.target

3.4知识点（Ajax）

1）XMLHttpRequest

var xhr = new XMLHttpRequest( );
xhr.onreadystatechange = function( ){
  if(xhr.readyState==4){
     if(xhr.status==200){
        alert(xhr.responseText);
       }
    }
};
xhr.open("GET","/api",false);
xhr.send(null);

2）状态码说明

• 0-（未初始化）没调用send( )
• 1-（载入）调用send( )，正发送请求
• 2-（载入完成）send( )完，收完内容
• 3-（交互）解析响应内容
• 4-（完成）解析完可以在客户端用
• 2xx-成功处理请求
• 3xx-要重定向，浏览器直接跳转
• 4xx-客户端请求错误
• 5xx-服务端错误

3）跨域

• 什么是跨域
  • 跨域条件：协议、域名、端口，有一个不同就算跨域
  • 浏览器有同源策略，不允许ajax访问其他域接口
• 可以跨域的三个标签
  • <img src = xxx>
  • <link href = xxx>
  • <script src = xxx>

3.5知识点（JSONP）

1)实现原理

• 加载某网址上的html文件http://www.xxxx.com/class.html
• 服务器端不一定有一个class.html文件，服务器可根据请求动态生成文件返回

2)例子

• 你要访问某网站的一个接口，该网站给你一个地址，你将它写在你的网站的<script src = xxx>里
• 同时，还要写一个window.callback = function(data){//我们跨域得到的信息}

3.6知识点（存储）

1）cookie

• 本身用于客户端和服务端通信，但有本地存储功能
• 用document.cookie = ...获取和修改
• 缺点：
  • 存量小，4kb
  • 所有http请求都带着，影响资源获取效率

2）locationStorage和sessionStorage

• html为存储设计，最大存储量5M
• API简单易用
  • .setItem(key,value)
  • .getItem(key)

3)三者区别

• 容量
• 是否携带到ajax中
• API易用性

关于JS重点知识介绍到这里，这里不作详细介绍，只粗略列出常用知识点。