什么是DOM众辨？
DOM端三，顧名思義，文檔對(duì)象模型鹃彻，它是HTML和XML的編程接口郊闯。我們無法直接操縱HTML，而是通過DOM把文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象組成的結(jié)構(gòu)對(duì)象蛛株。我們可以通過腳本或其他編程語言來操縱DOM团赁，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容谨履。
DOM節(jié)點(diǎn)分類欢摄？
DOM節(jié)點(diǎn)可用元素屬性nodeType來分辨類型，分為1（元素節(jié)點(diǎn)）／2（屬性節(jié)點(diǎn)）／3（文本節(jié)點(diǎn)）笋粟。
創(chuàng)建節(jié)點(diǎn)
創(chuàng)建元素節(jié)點(diǎn)：document.createElement()
創(chuàng)建文本節(jié)點(diǎn)： document.createTextNode("Hello World!")
獲取節(jié)點(diǎn)
// 返回當(dāng)前文檔中第一個(gè)類名為 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一個(gè)文檔中所有的class為"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");
// 獲取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');
獲取節(jié)點(diǎn)關(guān)系
// 獲取父元素怀挠、父節(jié)點(diǎn)
var parent = ele.parentElement;
var parent = ele.parentNode;
// 獲取子節(jié)點(diǎn),結(jié)果為一個(gè)節(jié)點(diǎn)數(shù)組，子節(jié)點(diǎn)可以是任何一種節(jié)點(diǎn)害捕，可以通過nodeType來判斷
var nodes = ele.children;
// 當(dāng)前元素的第一個(gè)/最后一個(gè)子元素節(jié)點(diǎn)
var el = ele.firstElementChild;
var el = ele.lastElementChild;
// 下一個(gè)/上一個(gè)兄弟元素節(jié)點(diǎn)
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;
/ 添加绿淋、刪除子元素
ele.appendChild(el);
ele.removeChild(el);
// 替換子元素(el1替換el2)
ele.replaceChild(el1, el2);
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);
屬性操作
// 獲取一個(gè){name, value}的數(shù)組
var attrs = el.attributes;
// 獲取、設(shè)置屬性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');
// 判斷尝盼、移除屬性
el.hasAttribute('class');
el.removeAttribute('class');
// 是否有屬性設(shè)置
el.hasAttributes();
innerHTML和outerHTML
innerHTML包括元素內(nèi)部的元素和文本
outerHTML包括其本身及其內(nèi)部的所有
nodeName和nodeValue
