js API

• 從基礎知識JS-web-API
• js基礎知識：ECMA 262標準
• js-web-API: w3c標準
• W3c標準中關於js的規定有
• DOM操做、BOM操做、事件綁定、ajax請求（包括http協議）、存儲
• 常說的js（瀏覽器執行的js）包含兩部分：
• 一、js基礎知識（ECMA262標準）
• 二、JS-Web-API（w3c標準）

1、DOM操做

• 知識點：DOM本質、DOM節點操做、DOM結構操做

一、DOM本質 樹

• DOM就是Document+Object+Model（文檔對象模型）。

二、DOM節點操做

• DOM能夠理解爲：瀏覽器把拿到的HTML代碼，結構化爲一個瀏覽器可識別而且js可操做的一個模型而已。

（1）、獲取DOM節點

var div1 = document.getElementById('div1');//元素
var divList = document.getElementsByTagName('div');//集合
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementsByClassName('.container');
var pList = document.querySelectorAll('p');//集合

(2)、property 屬性

var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width);//獲取樣式
p.style.width = '100px';//修改樣式
console.log(p.className);//獲取class
p.className = 'p1';//修改class
//獲取nodeName和nodeType
console.log(p.nodeName);
console.log(p.nodeType)

(3)、Attribute 屬性

var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('date-name');
p.setAttribute('date-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font-size:30px')

三、DOM結構操做

• 新增節點、獲取父元素、獲取子元素、刪除節點

（1）、新增節點

var div1 = document.getELementById('div1');
//添加新節點
var p1 = document.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1);//添加新建立的元素
//移除已有節點
var p2 = document.getElementById('p2');
div1.appendChild(p2);

（2）、獲取父元素和子元素

var div1 = document.getELementById('div1');
var parent = div1.parentElement;//父元素
var child = div1.childNodes;//子元素
div1.removeChild(child[0]);//刪除節點

解題

一、DOM是哪一種基本的數據結構

• 樹

二、DOM操做的經常使用API有哪些

• 獲取DOM節點、以及節點的property和attribute；
• 獲取父元素，獲取子元素
• 新增節點，刪除子元素

三、DOM節點的Attribute和property有何區別

• property只是一個js對象的屬性的修改
• Attribute是對html標籤屬性的修改

2、BOM

• Brower object model 瀏覽器對象模型
• 知識點
• navigator(瀏覽器)、screen(屏幕)、location(地址)、history(歷史)

（1）、navigator & screen

//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('chrome');
console.log(isChrome)
//screen
console.log(screen.width);
console.log(screen.height);

(2)、location & historylocation.href //地址

location.protocal //'http' 'https'
location.host //集合
location.pathname //'/learn/199'路徑
location.search //?參數
location.hash //#
//history
history.back()
history.forward()

解題

• 如何檢測瀏覽器的類型

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

3、事件綁定

• 知識點：通用事件綁定；事件冒泡；代理

一、經過事件綁定

var btn = document.getElementById('btn1');
btn.addEventListener('click',function(event){
    console.log('clicked');

})
function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
    e.preventDefault();//阻止默認行爲
    alert('clicked');
})

關於IE低版本的兼容性

• IE低版本使用attachEvent綁定事件，和w3c標準不同

二、事件冒泡

<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>
var p1 = document.getElementById('p1');
var body = document.body;
function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}
bindEvent(p1,'click',function(e){
    e.stopPropagation()//阻止冒泡
    alert('激活');
})
bindEvent(body,'click',function(e){
    alert('取消')
})

三、代理

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <!-- 會隨時新增更多a標籤 -->
</div>
<script>
    var div1 = document.getElementById('div1');
    div1.addEventListener('click',function(e){
        var target = e.target;
        if(target.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })
</script>

完善通用綁定事件的函數

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <!-- 會隨時新增更多a標籤 -->
</div>
<script>
    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){
        e.preventDefault();
        console.log(this.innerHTML)
    })
</script>

解題

簡述事件冒泡流程

• DOM樹形結構->事件冒泡 --> 阻止冒泡 --> 冒泡的應用

4、ajax

• 知識點:XMLHttpRequest、狀態碼說明、跨域

一、XMLHttpRequest

var xhr = XMLHttpRequest;
xhr.open('GET','api',false);
xhr.onreadystatechange = function(){
    //這裏的函數異步執行，可參考以前js基礎的異步模塊
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseText)
        }
    }
}
xhr.send(null);
//IE兼容問題;
//IE低版本使用ActiveXObject和w3c標準不同

二、readyState 狀態碼說明

• 0---（未初始化）尚未調用send()方法
• 1--- (載入)已調用send方法，正在發送請求
• 2---（載入完成）send()方法執行完成，已經接收到所有響應內容
• 3---（交互）正在解析內容
• 4---（完成）響應內容解析完成，能夠在客戶端調用了

三、status狀態碼說明

• 2xx --- 表示成功處理請求，如200；
• 3xx --- 須要重定向，瀏覽器直接跳轉；
• 4xx --- 客戶端請求錯誤，如404
• 5xx --- 服務端錯誤

四、跨域

• 什麼是跨域、JSONP、服務器端設置http header

(1)、什麼是跨域？

• 瀏覽器有同源策略，不容許ajax訪問其餘域接口
• http://www.yourname.com:80/page1.html
• http端口80 https端口默認443
• 跨域條件：協議、域名、端口有一個不一樣就算跨域

（2）、能夠跨域的三個標籤

• 有三個標籤容許跨域加載資源
• <img src="xxx" />
• <link href="xxx" />
• <script src="xxx" />

(3)、三個標籤的場景

• <img>用於打點統計，統計網站多是其餘域
• <link>``<script>可使用CND、CND的也是其餘域
• <script>能夠用JSONP

（4）、跨域注意事項

• 全部的跨域請求都必須通過信息提供方容許，若是未經容許便可獲取，那是瀏覽器同源策略出現漏洞

（5）、JSONP實現原理

• 加載http://www.baidu.com/classindex.html
• 不必定服務器端有一個classindex.html文件
• 服務器能夠根據請求，動態生成一個文件返回

• 同理於<script src="http:www.baidu.com/api.js">

  <script>
        window.callback = function(data){
            //這裏咱們跨域獲得信息
            console.log(data)
        }
    </script>

(6)、服務器端設置http header

• 另一個解決跨域的簡潔方法，須要服務端來作，可是做爲交互方，咱們必須知道這個方法，是將解決跨域問題的一個趨勢。

5、存儲

• 知識點：cookie、locationStorage 和sessionStorage

一、cookie

• 自己用於客戶端和服務端通訊
• 可是它有本地存儲的功能，因而就被「借用」；
• 使用document.cookie = ... 獲取和修改便可

（1）、cookie用於存儲的缺點

• 存儲量過小，只有4kb
• 全部http請求都帶着，會影響獲取資源的效率
• API簡單，須要封裝才能用document.cookie = ...

(2)、locationStorage和sessionStorage

• HTML5專門爲存儲而設計，最大容量5M（兆）
• API簡單易用
• localStorage.setItem(key,value)
• localStorage.getItem(key,value)
• ios safar隱藏模式下 localStorage.getItem會報錯