JS-WEB-API

常說的JS（瀏覽器執行的JS）包含兩部分：

• JS基礎知識：ECMA 262標準
• JS-WEB-API：W3C標準

W3C標準中關於JS的規定有：

• DOM操作
• BOM操作
• 事件綁定
• Ajax請求（包括HTTP協議）
• 存儲

例如：頁面彈窗是 window.alert(123)，瀏覽器需要做：

1. 定義一個 window 全局變量，對象類型
2. 給它定義一個 alert 屬性，屬性值是一個函數

獲取元素 document.geiElementById(id)，瀏覽器需要：

1. 定義一個 document 全局變量，對象類型
2. 給它定義一個 geiElementById 屬性，屬性值是一個函數

Document Object Model (DOM)

• DOM是哪種基本的數據解構？ 樹形結構的文檔對象模型
• DOM操作常用API有哪些？
• DOM 節點的attr 和 propery 有何區別？

DOM節點操作

1、獲取

var a = document.getElementById("div1");
var b = document.getElementsByTagName(‘div‘);
var c = document.getElementsByClassName(‘.container‘);
var d = document.querySelectorAll(‘p‘);

2、property

修改的是JS對象的標準屬性

3、attribute

修改獲取的是HTML文檔中標簽的屬性

DOM結構操作

新增節點，添加節點

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);

獲取父元素與子元素、移除節點

var div1 = document.getElementById("div1");

var parent = div1.parentElement;
var child = div1.childNodes;
//移除節點
div1.removeChild(child[0]);

BOM操作（Browser Object Model)

• 檢測瀏覽器類型
• 拆解 url 各部分

知識點

• navigator & screen

• //檢測瀏覽器類型
  var ua = navigator.userAgent;
  var isChrome = ua.indexOf(‘Chrome‘);
  console.log(isChrome);
  
  //screen  獲取屏幕大小
  console.log(screen.width);
  console.log(screen.height);

  loaction & history

• //拆解URL各部分
  //loaction
  console.log(location.href);        //當前域名
  console.log(location.host);        //當前域名
  console.log(location.protocol);    //協議 http:
  console.log(location.pathname); //當前分目錄名
  console.log(location.search);    //    查詢部分：‘？’之後部分
  console.log(location.hash);    //‘#’ 後面的字符
  
  //history
  history.back();
  history.forward();

事件

• 編寫一個通用的事件監聽函數
• 描述事件冒泡流程
• 對於一個無限下拉加載圖片的頁面，如何給每個圖片綁定事件

通用事件綁定

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低版本使用 attachEvent 綁定事件，和 w3c 標準不一樣

事件冒泡

按照DOM樹形結構，由子級到祖級的順序傳播

案例：點擊p1彈出激活，點擊其他的彈出取消

<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>

<script type="text/javascript">
    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(){
        alert(‘取消‘);
    })

事件代理

事件代理就是在祖級DOM元素綁定一個事件，當觸發子孫級DOM元素的事件時，利用事件流的原理來觸發綁定在祖級DOM的事件。

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <!-- 會隨時新增更多的 a 標簽 -->
</div>

<script type="text/javascript">
    var div1 = document.getElementById(‘div1‘);
    div1.addEventListener(‘click‘,function(e){
        //target屬性返回觸發該事件的節點
        var target = e.target;
        //nodeName返回的標簽名都是大寫
        if(target.nodeName == ‘A‘){
            alert(target.innerHTML);
        }
    })
</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;
　　　　　　//如果target是指定的選擇器
            if(target.matches(selector)){
　　　　　　　　//讓target使用fn的方法，修改this的指向
                fn.call(target,e);
            }
　　　　//不使用代理
        }else{
            fn(e);
        }
    })
}

//使用代理
var div1 = document.getElementById(‘div1‘);
bindEvent(div1,‘click‘,‘a‘,function(e){
    console.log(this.innerHTML);
})

//不使用代理
var a = document.getElementById(‘a‘);
bindEvent(div1,‘click‘,function(e){
    console.log(a.innerHTML);
})

代理的好處

• 代碼簡潔
• 減少瀏覽器內存占用（因為綁一次事件瀏覽器會計一次）

JS-WEB-API 整理