DOM 是 Document Object Model（文檔對象模型）的縮寫。DOM分爲核心DOM、XML DOM、HTML DOM，我們接觸的主要是HTML DOM，HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。我們通過js實現交互的過程中，具體來說是在操作DOM節點。在 HTML DOM 中，所有內容都是節點。
DOM節點：節點在文檔中以節點樹的形式存在，如圖：
節點分爲12種不同類型，常用的有元素節點(1)、屬性節點(2)、文本節點(3)。同時，每種類型分別表示文檔中不同的信息及標記。每個節點都擁有各自的特點、數據和方法，也與其他節點存在某種關係。節點之間的關係構成了層次，而所有頁面標記則表現爲一個以特定節點爲根節點的樹形結構。關係圖如下：
瞭解了節點的基本概念後，下面先來熟悉一下節點3個基本屬性：nodeName、nodeType、nodeValue
nodeName：
文檔裏的每個節點都有以下屬性。
nodeName:一個字符串，其內容是給定節點的名字。
var name = node.nodeName;
* 如果節點是元素節點，nodeName返回這個元素的名稱
* 如果是屬性節點，nodeName返回這個屬性的名稱
* 如果是文本節點，nodeName返回一個內容爲#text 的字符串
注:nodeName 是一個只讀屬性.
nodeType：
nodeType：返回一個整數，這個數值代表着給定節點的類型。
nodeType 屬性返回的整數值對應着 12 種節點類型,常用的有三種：
Node.ELEMENT_NODE —1 – 元素節點
Node.ATTRIBUTE_NODE —2 – 屬性節點
Node.TEXT_NODE —3 – 文本節點
nodeType 是個只讀屬性
nodeValue:
nodeValue：返回給定節點的當前值（字符串）
如果給定節點是一個屬性節點，返回值是這個屬性的值。
如果給定節點是一個文本節點，返回值是這個文本節點的內容。
如果給定節點是一個元素節點，返回值是 null
nodeValue 是一個 讀/寫 屬性，但不能對元素節點的 nodeValue 屬性設置值，
但可以爲文本節點的 nodeValue 屬性設置一個值。
DOM主要是用來實現交互的，那麼怎樣才能操作DOM節點實現交互呢？四個字：增刪改查！具體實現，請往下看 ↓↓↓
查：
在對DOM節點進行增刪改之前，首先要找到這個節點元素。查找途徑可以用節點方法或節點屬性：
節點方法：
| 方法 | 描述 |
| getElementById() | 返回當前選中的單個節點對象 |
| getElementsByTagName() | 返回當前選中的節點數組NodeList對象 |
| getElementsByClassName() | 返回當前選中的節點數組NodeList對象，多個類名用空格隔開 //IE9+ |
| querySelector() | 接收一個css選擇符，返回匹配到的第一個節點元素，若無則返回null //IE8+ |
| querySelectorAll() | 接收一個css選擇符，返回匹配到的所有節點元素NodeList對象 |
注意：NodeList類似數組，但不是數組，用於保存一組有序的節點。它有length屬性，可以通過方括號或item()方法訪問節點。
利用節點屬性獲取子節點、父節點、同胞節點：
子節點：
1 Node.childNodes; //獲取子節點列表NodeList; 注意換行在瀏覽器中被算作了text節點，如果用這種方式獲取節點列表，需要配合nodeType屬性進行過濾2 Node.firstChild; //獲取第一個子元素3 Node.lastChild; //獲取最後一個子元素4 /*childNodes會獲取到textNode，而children屬性只獲取元素節點*/
父節點：
1 Node.parentNode // 返回父節點2 Node.ownerDocument //返回祖先節點（整個document）
同胞節點：
1 Node.previousSibling // 返回前一個節點，如果沒有則返回null2 Node.nextSibling // 返回後一個節點
增：
新增節點首先要創建節點，然後將新建的節點插入DOM中，所以下面分別介紹創建節點和插入節點的方法，複製節點的方法也在創建節點中進行介紹。
創建元素節點：
createElement() // 按照指定的標籤名創建一個新的元素節點
創建代碼片段（爲避免頻繁刷新DOM，可以先創造代碼片段，完成所有節點操作之後統一添加到DOM中）
createDocumentFragment()
創建屬性節點：
node.setAttribute(attr,value); // 按照指定的屬性名創建一個新的屬性節點
創建文本節點：
node.createTextNode(value) // 按照指定的文本創建一個新的文本節點
複製節點：
clonedNode = Node.cloneNode(boolean) // 只有一個參數，傳入一個布爾值，true表示複製該節點下的所有子節點；false表示只複製該節點
插入節點：
1 /*插入node*/2 parentNode.appendChild(childNode); // 將新節點追加到子節點列表的末尾3 parentNode.insertBefore(newNode, targetNode); //將newNode插入targetNode之前4 5 /*插入html代碼*/6 node.insertAdjacentHTML('beforeBegin', html); //在該元素之前插入代碼7 node.insertAdjacentHTML('afterBegin', html); //在該元素的第一個子元素之前插入代碼8 node.insertAdjacentHTML('beforeEnd', html); //在該元素的最後一個子元素之後插入代碼9 node.insertAdjacentHTML('afterEnd', html); //在該元素之後插入代碼
附加：DOM 沒有提供 insertAfter() 方法
1 function insertAfter(newElement,targetElement){ 2 //獲取目標元素的父節點 3 var parentElement=targetElement.parentNode; 4 //如果目標元素是最後一個元素,則新元素插入到目標元素的後面 5 if(parentElement.lastChild==targetElement){ 6 parentElement.appendChild(newElement); 7 }else{ //如果目標元素不是最後一個元素,則新元素插入到目標元素的下一個兄弟節點的前面,即目標元素的後面 8 parentElement.insertBefore(newElement,targetElement.nextSibling); 9 }10 }
改：
替換節點：
parentNode.replace(newNode, targetNode); //使用newNode替換targetNode
刪：
移除節點：
1 parentNode.removeChild(childNode); // 移除目標節點2 node.parentNode.removeChild(node); //在不清楚父節點的情況下使用
---------------------------------------分割線--------------------------------------------
只有節點還不能夠完全實現交互，下面再來看看如何操作樣式：
通過節點直接獲取樣式：
1 node.style.color //可讀可寫 僅獲取行內 樣式2 3 /*獲取最終樣式 且兼容所有瀏覽器寫法*/4 function getStyle(ele,style){5 return ele.currentStyle ? obj.currentStyle[style] : window.getComputedStyle(ele)[style]; //前面兼容ie、ff；後面兼容chrom、opera、safir6 };
獲取和修改元素樣式：
HTML5爲元素提供了一個新的屬性：classList 來實現對元素樣式表的增刪改查。操作如下：
1 node.classList.add(value); //爲元素添加指定的類2 node.classList.contains(value); // 判斷元素是否含有指定的類，如果存在返回true3 node.classList.remove(value); // 刪除指定的類4 node.classList.toggle(value); // 有就刪除，沒有就添加指定類
修改DOM特性的方法：
Node.getAttribute('id') // 獲取,包括data屬性Node.setAttribute('id') // 設置Node.removeAttribute() // 移除Node.attributes // 獲取DOM全部特性