什么是DOM？###

定義：文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。
DOM是瀏覽器提供的接口，想要操作DOM就要使用DOM。

什么是Node？###

節(jié)點(diǎn)(Node)是組成DOM的最小單位。DOM樹，就是由各種不同類型的節(jié)點(diǎn)組成。

Element和Node的區(qū)別?####

對于HTML文檔，節(jié)點(diǎn)(Node)主要有以下六種類型：

So： Element繼承了Node類，也就是說Element是Node多種類型中的一種，也叫作ELEMENT_NODE 。
也就是說我們平時(shí)使用的html上的元素，即Element是類型為ELEMENT_NODE的Node。

獲取DOM####

 //獲取節(jié)點(diǎn)（不會(huì)搜索不在文檔中的元素）
var getnode1 = document.getElementById('test')
var getnodes1 = document.getElementsByClassName('test1 test2')

 //獲取多個(gè)節(jié)點(diǎn)（返回的HTML集合是動(dòng)態(tài)的）
var getnodes2 = document.getElementByTagName('p')

//支持更高級節(jié)點(diǎn)查詢方法(只會(huì)返回第一個(gè)符合的元素)
var getnode2 = document.querySelector('div#test')

//返回與指定的選擇器組匹配的元素列表(按出現(xiàn)的順序排列)
var getnode3 = document.querySelectorAll("div.test, div.test2,div.test3")

創(chuàng)建DOM####

var createEle = document.createElement('div')
var createNode = document.createTextNode('hello world!')

查找DOM####

// 獲取父元素、父節(jié)點(diǎn)(空時(shí)返回null)
var parent = node.parentElement;
var parent = node.parentNode;

// 返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合
var childrens = node.childrenNodes;   

// 當(dāng)前元素的第一個(gè)/最后一個(gè)子元素節(jié)點(diǎn)
var el = node.firstElementChild;
var el = node.lastElementChild;

// 下一個(gè)/上一個(gè)兄弟元素節(jié)點(diǎn)
var el = node.nextElementSibling;
var el = node.previousElementSibling;

修改DOM####

// 刪除一個(gè)子節(jié)點(diǎn)。返回刪除的節(jié)點(diǎn)（oldChild === child）
var oldChild = node.removeChild(child);

//將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。
var newChild = node.appendChild(child);

// 指定的節(jié)點(diǎn)替換當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)（newChild 替換 oldChild）
// 返回被替換掉的節(jié)點(diǎn)（ replacedNode === oldChild相等）
var replacedNode = node.replaceChild(newChild, oldChild);

// 在當(dāng)前節(jié)點(diǎn)的某個(gè)子節(jié)點(diǎn)之前再插入一個(gè)子節(jié)點(diǎn)
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

//方法返回一個(gè)布爾值，判斷當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)。
element.hasChildNodes()

// textContent屬性返回當(dāng)前節(jié)點(diǎn)和它的所有后代節(jié)點(diǎn)的文本內(nèi)容(textContent會(huì)把后代的div吃掉)
element.textContent = 'hello world'

操作屬性####

// 獲取數(shù)組
ele.attributes;
// 獲取屬性
ele.getAttribute('class');
//設(shè)置屬性
ele.setAttribute('class', 'highlight');
// 判斷屬性
ele.hasAttribute('class');
//移除屬性
ele.removeAttribute('class');
// 是否有屬性設(shè)置
ele.hasAttributes();