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重點知識介紹到這裏，這裏不做詳細介紹，只粗略列出經常使用知識點。