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来获取当前元素；

    好处在于不同为每个元素绑定事件处理函数，只需要为这些元素的父元素绑定一次即可。

    应用：
        动态表格