1.HTML DOM (文件物件模型)

通過 HTML DOM，可訪問 JavaScript HTML 文件的所有元素。

1.JavaScript 能夠改變頁面中的所有 HTML 元素
（1）查詢 HTML 元素：
通過 id 找到 HTML 元素:document.getElementById("intro");
通過標籤名找到 HTML 元素:document.getElementsByTagName("p");
通過類名找到 HTML 元素:document.getElementsByClassName("intro");
(2)JavaScript 能夠改變頁面中的所有 HTML 屬性

• 改變 HTML 輸出流，document.write() 可用於直接向 HTML 輸出流寫內容。
  注意：絕對不要在文件(DOM)載入完成之後使用 document.write()。這會覆蓋該文件。
• 改變 HTML 內容：document.getElementById(id).innerHTML=新的 HTML
• 改變 HTML 屬性：document.getElementById(id).attribute=新屬性值，attribute為屬性名

2.JavaScript 能夠改變頁面中的所有 CSS 樣式

• 改變 HTML 樣式：document.getElementById(id).style.property=新樣式，
  property為樣式名
• 改變樣式可以與點選事件結合使用：

onclick="document.getElementById('id1').style.color='red'"

3.JavaScript 能夠對頁面中的所有事件做出反應

• onload 和 onunload 事件：使用者進入或離開頁面時被觸發
• onclick事件：點選時觸發
• onchange 事件：結合對輸入欄位的驗證來使用
• onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時觸發函式。
• onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。

2.EventListener控制代碼，冒泡與捕獲

• addEventListener() 方法：用於向指定元素新增事件控制代碼，新增的事件控制代碼不會覆蓋已存在的事件控制代碼。
  語法

element.addEventListener(event, function, useCapture);

第一個引數是事件的型別 (如 “click” 或 “mousedown”)。不要使用 “on” 字首，使用 “click”
第二個引數是事件觸發後呼叫的函式。
第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
將 p元素插入到 div元素中，使用者點選 p 元素
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即：p元素的點選事件先觸發，然後會觸發 div元素的點選事件。預設值為 false, 即冒泡傳遞
在捕獲中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： div元素的點選事件先觸發 ，然後再觸發p 元素的點選事件。當值為 true 時, 事件使用捕獲傳遞。

• removeEventListener() 方法移除由 addEventListener() 方法新增的事件控制代碼

3.事件

1.事件流：在頁面中接受事件的順序
2.事件冒泡與捕獲;
在冒泡中，內部元素的事件會先被觸發，然後再觸發外部元素，即：p元素的點選事件先觸發，然後會觸發 div元素的點選事件。預設值為 false, 即冒泡傳遞
在捕獲中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： div元素的點選事件先觸發 ，然後再觸發p 元素的點選事件。當值為 true 時, 事件使用捕獲傳遞。
3.事件處理
（1）html事件處理

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
</div>
    <script>
        function  demo() {
            alert("hello，html事件處理");
        }
    </script>

缺點：當需要改動時，需要改動多處
（2）DOM0級事件處理

<script>
    var btn1=document.getElementById("btn1");
    btn1.onclick=function (ev) { alert("hello,DOM0級處理事件程式1") } 
    btn1.onclick=function (ev) { alert("hello,DOM0級處理事件程式2") }
    btn1.onclick=function (ev) { alert("hello,DOM0級處理事件程式3") } 
//最後彈出來的是3,1和2被覆蓋掉
    btn1.onclick=null;  //表示內容被清除
</script>

（3）DOM2級事件處理
注：DOM2的布林值（true、false）已不需要操作

<script>
    var btn1=document.getElementById("btn1");
    btn1.addEventListener("click",demo1);
    btn1.addEventListener("click",demo2);
    btn1.addEventListener("click",demo3);
    function demo1() {
        alert("DOM2級事件處理程式1")
    }
    function demo2() {
        alert("DOM2級事件處理程式2")
    }
    function demo3() {
        alert("DOM2級事件處理程式3")
        // 事件不會互相覆蓋，點選確認後依次彈出
    }
    btn1.removeEventListener("click",demo2);
    // DOM2級事件處理程式2被移除
</script>

（4）IE事件處理程式：主要考慮瀏覽器的相容

<script>
    var btn1=document.getElementById("btn1");
    if(btn1.addEventListener){            // 如果瀏覽器支援DOM2級
         btn1.addEventListener("click",demo);
    }else if(btn1.attachEvent){       //如果IE8不能處理，則讓處理器處理IE事件
        btn1.attachEvent("onclick",demo);
    }else {                       //如果都不支援，只支援DOM0級事件
       btn1.onclick=demo();
       }
    function demo() {
        alert("hello")
    }
</script>

4.事件處理物件：在觸發DOM事件的時候會產生一個物件
(1)type：獲取事件的型別
(2)target：獲取事件的目標
(3)阻止事件的冒泡
(4)阻止預設事件的發生

<script>
    document.getElementById("btn1").addEventListener("click",showType);
    document.getElementById("div").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);
    function  showType(event) {
        alert(event.type);// 當點選按鈕時，彈出當前事件的型別click
        alert(event.target);  // 當點選按鈕時，彈出當前事件的目標
        event.stopPropagation(); //阻止事件冒泡，div不再出現
    }
    function  showDiv() {
        alert("div");
    }                //冒泡事件，先彈出button的target，再彈出div的函式target
    function showA() {
        event.stopPropagation();  //阻止氣泡排序
        event.preventDefault();  //阻止預設事件發生，即不允許點選時網頁跳轉
    }
</script>

4.DOM 元素（節點）

建立新的 HTML 元素 (節點) - appendChild()
建立新的 HTML 元素 (節點) - insertBefore()
移除已存在的元素removeChild()
替換 HTML 元素 - replaceChild()
（1）獲取name、獲取元素、獲取元素屬性、設定元素屬性、訪問子節點

function getName() {
     var  count=document.getElementsByName("pn");
     var  count=document.getElementsByTagName("p");   
     alert(count.length);         //彈出3，說明相同name成為一個集合被存起來
     var  p=count[2];       //獲取集合中的數
     p.innerHTML="world";      //頁面顯示第三個hello被修改
 }
getName();     //獲取name

 function getAttr() {
     var  anode=document.getElementById("aid");
     var attr=anode.getAttribute("id");       //獲取元素的屬性，獲取元素的id
     alert(attr);
 }
getAttr();                  //頁面彈出一個aid

 function setAttr(){
     var anode=document.getElementById("aid2");
     anode.setAttribute("title","動態設定a的title屬性" );
     // setAttribute中第一個表示要被修改的變數，第二個表示被修改以後的值
     var attr=anode.getAttribute("title");
     alert(attr);
 }
 setAttr();

 function getchildNode(){   //子節點
     var childnode=document.getElementsByTagName("ul")[0].childNodes;
     alter(childnode.length);
     //列印子節點的長度，注意列表中元素的書寫方式，書寫方式不同，長度不同
     alert(childnode[0].nodeType);
     // nodeType 屬性返回以數字值返回指定節點的節點型別。
     // 如果節點是元素節點，則 nodeType 屬性將返回 1。
     // 如果節點是屬性節點，則 nodeType 屬性將返回 2。
}
getchildNode();

注意：

<ul> //瀏覽器認為這個位置還有一個元素
    <li>1</li>
    <li>2</li>
    <li>3</li>
    //所以ul的子節點長度列印結果為7
</ul>

可以通過修改位置

<ul>  <li>1</li><li>2</li><li>3</li>
    //此時ul的子節點長度列印結果為3
</ul>

（2）訪問父節點、建立元素節點、插入節點、刪除節點、頁面尺寸

function getParentNode() {
   var div=document.getElementById("pid");
   //獲取p標籤的父節點div
   alert(div.parentNode.nodeName);
   //列印節點的名稱，彈出結果為div
}


function createNode() {
    var div=document.body;
    var input=document.createElement("input");
    //建立的元素結點的型別；
    input.type="button";
    input.value="按鈕";
    body.appendChild(input);
    //插入節點，位置不可調控
}

function addNode() {
    var div=document.getElementById("div");
    var node=document.getElementById("pid");
    var newnode=document.createElement("p");
    //表示要插入一個p元素
    newnode.innerHTML="在動態中新增一個p元素";
    //直接定義這個p元素的內容
    div.insertBefore(newnode,node);
    //第一個表示要插入的元素，第二個表示要插入的相對位置
    //此處將它插入了div與p之間，
}

function  removeNode() {
    var div=document.getElementById("div");
    var p=div.removeChild(div.childNodes[1]);
    //表示刪除div中的第二個子節點，即p元素
}

function getSize() {
    var width=document.body.offsetWidth;
    var  width=document.documentElement.offsetWidth;
    //以上兩種寫法意義相同，考慮了不同瀏覽器的相容性
    //scrollwidth指包含滾動條時的長度，offset指不包含滾動條時的長度
}

5. DOM 集合(Collection)和節點列表（NodeList）

1.collection：看起來可能是一個數組，但其實不是一個數組！

var x = document.getElementsByTagName("p");
y = x[1];  //可以獲取第二個元素
document.getElementById("demo").innerHTML = myCollection.length;
//顯示集合元素個數

2.NodeList 物件：類似 HTMLCollection 物件，getElementsByClassName()返回的是 NodeList 物件，而不是 HTMLCollection 物件。
和collection相似，NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問，NodeList 物件 length 屬性定義了節點列表中元素的數量。
3.區別
HTMLCollection 是 HTML 元素的集合。NodeList 是一個文件節點的集合（既包括元素，也包括節點）。
【節點(Node)與元素(Element)的區別】：元素是一個小範圍的定義，必須是含有完整資訊的結點才是一個元素，例如<div>...</div>。但是一個結點不一定是一個元素，而一個元素一定是一個結點。

<div id="parentDiv">
     <!--註釋-->
     <div></div>
 </div>
 <script>
     console.log(document.getElementById('parentDiv').childNodes); 
     //節點：NodeList[5]
     console.log(document.getElementById('parentDiv').children) ;  
     //元素：HTMLCollection[1]
 </script>

DOM將文件中的所有都看作節點 node>element：

• 文件本身是文件節點
• 所有 HTML 元素是元素節點
• 所有 HTML 屬性是屬性節點
• HTML 元素內的文字是文字節點 （包括回車符也是屬於文字節點）
• 註釋是註釋節點