文件物件模型(Document Object Model，簡稱DOM ）)，是W3C組織推薦的處理可擴充套件標記語言（HTML或者XML )的標準程式設計介面。

DOM樹，所有都看做物件

文件:一個頁面就是一個文件，DOM中使用document表示

元素︰頁面中的所有標籤都是元素，DOM中使用element表示

節點∶網頁中的所有內容都是節點（標籤、屬性、文字、註釋等），DOM中使用node表示

1、獲取元素

根據ID獲取：getElementById()，返回一個匹配到ID的DOM Element物件。若在當前Document下沒有找到，則返回null。

根據標籤名獲取：getElementByTagName()，返回的是一個偽陣列的集合，若為空，返回空偽陣列；其元素物件是動態的。可以element.getElementByTagName()獲取父元素下子元素內容，不包含父元素，一般給父元素新增id指定　　

通過HTML5新增的方法獲取：getElementByClassName()；querySelector('選擇器')，返回第一個元素；querySelectorAll('選擇器')，返回所有符合條件元素， .class為類，#nav為id，標籤不用加。H5下新增，需要相容，該方法返回集合

特殊元素獲取： document.body、document.documentElement

若要獲取某些元素，可以用getElementById().getElementByTagName()或其他組合

2、事件：觸發響應機制，如滑鼠點選

事件源 var btn = document.getElementById('btn');

事件型別 btn.onclick 繫結事件

事件處理程式 btn.onclick = function(){ alert('點選') }

3、操作元素

改變內容：.innerText，替換內容，不識別html標籤和空格換行；.innerHTML 替換內容，識別html標籤，保留空格和換行

修改元素屬性：1、獲取元素id或者標籤等 2、註冊事件 id.onclick 3、屬性修改 cjj.onclick = fuction(){ img.src = '路徑' } 點選改變圖片

修改表單屬性：type、value、checked、selected、disabled

修改樣式屬性：element.style()行內

獲取元素屬性：element.getAttribute('屬性'); 該屬性不但可以呼叫內建屬性，還可以使用自定義屬性，或者element.dataset.index / element.dataset['index'];

自定義屬性：以data- 開頭 data-list-name

element.getAttribute('data-list-name'); /element.dataset.listName /element.dataset['listName']; dataset在ie11以上

更改元素屬性：element.setAttribute('屬性' , '值'); 這個可以用來設定索引號，對事件內外進行傳參。比如點選這個按鈕，內部要使用這個按鈕所對應的索引號，無法直接傳參，可以在事件之前使用set設定索引，然後內部用get獲得

 var lis = document.querySelectorAll('li');
 var ps = document.querySelectorAll('p');
 for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i);   //設定形參
        lis[i].onclick = function () {   //形參
            this.className = 'select';
            var index = this.getAttribute('index');//類似傳參
            ps[index].style.display = 'block';    //實參輸入
        }
    }

移出元素屬性：element.removeAttribute('屬性' , '值');

4、節點操作：利用父子兄節點關係獲取元素；邏輯性強，但是相容性稍差

nodeType、nodeName、nodeValue

獲取節點：父節點 parentNode，得到最近的父系節點，若找不到則返回null

<div class = ' box'>
    <span class = 'erweima'></span>
</div>

var erweima = document.querySelector( ' .erweima'); 
// varIbox = document.querySelector( '.box ');
erweima.parentNode;

同理，子節點 parentNode.childNodes; 包括文字，空格換行等，所有有時候會獲取無用節點，利用判斷nodeType獲取真正需要的節點；不經常使用，一般使用 parentNode.children獲取子元素節點。

獲得第一個、最後一個子節點 parentNode.firstChild; /parentNode.lastChild;獲得第一個、最後一個子元素節點 parentNode.firstElementChild; /parentNode.lastElementChild;

兄節點：node.nextSibling / node.previousSibling，包含元素與文字；獲取兄弟元素節點 node.nextElementSibling /node.previousElementSibling

建立節點：document.createElement('tagName'); 動態建立元素節點；

建立好後還要新增：node.appendChild('位元組點'); node父級，該方法為後置新增；node.insertBefore(child, 指定元素) 指定位置新增，類似新增偽元素，若指定位置沒有元素，也可新增，因為沒有元素時返回undefined，如ul下無li，列印ul.children[0]返回undefined

刪除節點：node.removeChild(child) 父節點刪除子節點

如果是使用事件進行節點新增，當添加了新節點後，如果要對新節點進行 操作，需要在建立節點的內部實時更新節點並更新所獲取的節點陣列

    btn[0].onclick = function () {
        if (text.value != null) {
            var lis = document.createElement('li');
            lis.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";
            comment.insertBefore(lis, comment.children[0]);   //新增節點
        }

        var del = document.querySelectorAll('a'); //添加了新的節點，需要在內部更新節點，在外部的話無法實時更新
        for (var i = 0; i < del.length; i++) {
            del[i].onclick = function () {
                comment.removeChild(comment.children[0]);   //內部刪除
            }
        }
    }

如果不是使用事件進行節點新增，則無所謂

var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (var j in datas[i]) {
            var td = document.createElement('td'); //迴圈建立td
            td.innerHTML = datas[i][j];
            tr.appendChild(td);
        }
        var td = document.createElement('td'); //迴圈建立td
        td.innerHTML = '<a href="JavaScript:;">刪除</a>';
        tr.appendChild(td);

        
        
    }
    var a = document.querySelectorAll('a');
    for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }

複製節點：node.cloneNode(); ，如果括號內為空或者false，則為淺拷貝，只拷貝節點本身，不拷貝子節點 加true則全複製；克隆後也一樣需要新增

三種動態建立元素：

document.write();，全部重繪，不常用；

element.innerHTML; 如果迴圈建立多個元素的時候，如果直接使用innerHTML拼接多個字串，效率較低，可以使用建立陣列的方式，將多個字串先放進陣列，再陣列轉字串，再一次繪製innerHTML，效率較高

document.createElement(); 建立多個元素時比innerHTML快很多，但是和陣列結構化後的innerHTML比效率稍低，但是結構清晰