JavaScript-dom

1. 面向對象

   1. 封裝（將建立對象的過程封裝起來）
      var obj = new Object();
      obj.name = "terry";
      obj.age = 12;
      obj.gender="male"
      1) 工廠函數模式

      問題：
          1. 類型沒法細分，全部經過該方式建立的對象的構造函數都是Object
          2. 封裝性比較差，函數聲明和工廠函數單獨聲明

2) 構造函數模式
        使用new關鍵字調用的函數通常稱爲構造函數；構造函數的函數名通常首字母大寫
        問題：
            1. 封裝性比較差，函數聲明和工廠函數單獨聲明
    3) 構造函數與原型結合模式
        將對象屬性封裝在構造函數中，體現獨特性
        將對象方法封裝在原型中，多個實例共享方法

2. 原型鏈繼承（嫁給有錢人家的孩子）
    子構造函數的原型指向父構造函數的實例
    
3. 借用構造函數繼承

1. dom
   第三方庫, 瀏覽器廠商提供的js操做html的api
   不一樣的瀏覽器廠商提供的api可能不一樣，因此dom存在兼容性問題（少部分）

   1) 構造函數樹

   Object
                                           Node
       Document                     Element                 Text     Comment
       HtmlDocument            HTMLElement
                                       HTMLDivElement
   
       document     是 Document實例對象
       var one = document.getElementById("one");
   
       one 是 HTMLDivElement實例對象
           能夠調用
               HTMLDivElement.prototype
               HTMLElement.prototype
               Element.prototype     【元素】
               Node.prototype         【節點】
               Object.prototype 【底層對象方法】
               中的屬性和方法

   2) Node.prototype

   屬性：
       層次結構
           parentNode     父節點
           childNodes     獲取全部子節點（文本，元素，註釋）
           firstChild     獲取當前節點的第一個子節點
           lastChild     獲取當前節點的最後一個子節點
           nextSibling 獲取當前節點下一個兄弟節點
           previousSibling     獲取當前節點上一個兄弟節點
           ownerDocument     獲取當前document
   
       節點屬性：
           nodeName 
               若是文本節點:#text
               若是元素節點:元素的名稱大寫
           nodeType
               Node.ELEMENT_NONE         
               Node.DOCUMENT_NONE  
               Node.COMMENT_NONE 
               Node.TEXT_NODE
           nodeValue
               註釋節點
               文本節點
   
   方法：
       【父節點調用的方法】
       appendChild()     追加孩子節點
       insertBefore(new,reference) 將new節點插入到reference以前 
       removeChild(child)    移除指定的子節點元素
       replaceChild(new, old)    使用new節點替換old節點
   
       cloneNode()         克隆節點
       contains()             判斷某個節點是不是當前節點的後代節點
       hasChildNodes() 盤點某個節點是不是當前節點的子節點
   
       <div id="one">
           <div>hello</div>
           <div>world</div>
       </div>
       <div id="two">two</div>

3) Document.prototype
    屬性
        head
        title
        body
        forms
        images
        hidden
        links
        location     跳轉

    方法:
        createElement(tagName)
        getElementById()
            經過id獲取元素
        getElementsByClassName()
            獲取類名獲取元素
        getElementsByName()
            經過名稱獲取元素
        getElementsByTagName()
            經過標籤名獲取元素


4) Element.prototype
    屬性：
        children         獲取全部子元素
        firstElementChild     獲取當前元素的第一個子元素
        lastElementChild        獲取當前元素的最後一個子元素
        nextElementSibling     獲取當前元素的下一個兄弟元素
        previousElementSibling    獲取當前元素的上一個兄弟元素

        innerHTML     獲取或者設置元素內部的html，標籤能夠被解析

        id
        className

        name
        href
        src
        alt
        ...

        clientWidth         寬（padding + 內容）
        clientHeight         高（padding + 內容）
        clientTop                上邊框的寬度
        clientLeft            左邊框的寬度
    方法：
        getAttribute(key)
        setAttribute(key,val)
        querySelector()
        querySelectorAll()


5) HTMLElement
    innerText     設置或獲取元素內部的文本內容，標籤不會被解析

1. 事件
   1) 簡單應用

   爲元素添加事件響應函數，當執行相應的操做的時候會執行該函數
   
   // 1. 事件源
   var one = document.getElementById("one");
   // 2. 綁定事件處理函數
   var a = 1;
   one.onclick = function(event){
       // 3. 事件對象
       console.log(event);
       alert(a);
   }

   2) 事件三要素

   事件源
   事件處理函數
   事件對象

   3) 事件流（元素嵌套，爲每層元素添加事件處理函數）

   1. 事件捕獲(外->內)
   
   2. 事件冒泡(內->外)
       在多數瀏覽器中，默認按照事件冒泡的方式來執行事件處理函數，也就是越靠裏的元素上的事件處理函數越先執行。

4) 事件對象
    使用事件綁定的方式不一樣，獲取事件對象的方式就不一樣
    1.屬性
        target         
            在一個嵌套的結構中，當點擊內部元素，外部元素上綁定的onclick事件處理函數也會執行，這時候，這個事件處理函數中的event.target爲內部元素；通常用於事件代理
        currentTarget
            在一個嵌套的結構中，當點擊內部元素，外部元素上綁定的onclick事件處理函數也會執行，這時候，這個事件處理函數中的event.currentTarget爲外部元素（綁定該事件處理函數的事件源）
            
        stopPropagation()
            阻止捕獲和冒泡階段中當前事件的進一步傳播


5) 事件處理函數的綁定
    1. 普通綁定（絕大多數瀏覽器都兼容）
        事件源.onxxx = function(event){

        }
        事件對象經過事件處理函數形式參數來接受便可
    2. 非IE
        事件源.addEventListener("xxx",function(event){

        })
        事件對象經過事件處理函數形式參數來接受便可

    3. IE
        事件源.attachEvent("xxx",function(){
            window.event
        })
6) 事件代理
    將事件處理函數綁定在當前元素的父元素上，當點擊當前元素的時候，父元素上綁定的事件處理函數就能夠執行，能夠經過event.target來獲取當前元素；

    好處在於不一樣爲每一個元素綁定事件處理函數，只須要爲這些元素的父元素綁定一次便可。

    應用：
        動態表格