什么是DOM？###

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

什么是Node？###

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

Element和Node的區別?####

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

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

獲取DOM####

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

 //獲取多個節點（返回的HTML集合是動態的）
var getnodes2 = document.getElementByTagName('p')

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

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

創建DOM####

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

查找DOM####

// 獲取父元素、父節點(空時返回null)
var parent = node.parentElement;
var parent = node.parentNode;

// 返回包含指定節點的子節點的集合，該集合為即時更新的集合
var childrens = node.childrenNodes;   

// 當前元素的第一個/最后一個子元素節點
var el = node.firstElementChild;
var el = node.lastElementChild;

// 下一個/上一個兄弟元素節點
var el = node.nextElementSibling;
var el = node.previousElementSibling;

修改DOM####

// 刪除一個子節點。返回刪除的節點（oldChild === child）
var oldChild = node.removeChild(child);

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

// 指定的節點替換當前節點的一個子節點（newChild 替換 oldChild）
// 返回被替換掉的節點（ replacedNode === oldChild相等）
var replacedNode = node.replaceChild(newChild, oldChild);

// 在當前節點的某個子節點之前再插入一個子節點
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

//方法返回一個布爾值，判斷當前節點是否有子節點。
element.hasChildNodes()

// textContent屬性返回當前節點和它的所有后代節點的文本內容(textContent會把后代的div吃掉)
element.textContent = 'hello world'

操作屬性####

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