什么是DOM锯蛀？
說白了DOM就是瀏覽器為JavaScript提供的一系列接口（通過window.documnet提供的），通過這些接口我們可以操作web頁面放前。 但DOM并不是編程語言葡公，它是文檔對象的模型袜啃，該模型是獨立于編程語言的彼水。比如我們在Python中也可以操作DOM：
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
所以Web前端常講的DOM API (web 或 XML 頁面) = DOM + JS (腳本語言)
DOM 創(chuàng)建
DOM節(jié)點（Node）通常對應(yīng)于一個標(biāo)簽崔拥，一個文本，或者一個HTML屬性凤覆。
DOM節(jié)點有一個nodeType
屬性用來表示當(dāng)前元素的類型链瓦，它是一個整數(shù)：
- Element，元素
- Attribute盯桦，屬性
- Text慈俯，文本
DOM節(jié)點創(chuàng)建最常用的便是document.createElement和document.createTextNode
方法：
var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');
DOM 查詢
document提供了兩種Query方法：
/ 返回當(dāng)前文檔中第一個類名為 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一個文檔中所有的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');
Element也提供了很多相對于元素的DOM導(dǎo)航方法：
// 獲取父元素、父節(jié)點
var parent = ele.parentElement;
var parent = ele.parentNode;
// 獲取子節(jié)點拥峦，子節(jié)點可以是任何一種節(jié)點贴膘，可以通過nodeType來判斷
var nodes = ele.children;
// 查詢子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');
// 當(dāng)前元素的第一個/最后一個子元素節(jié)點
var el = ele.firstElementChild;
var el = ele.lastElementChild;
// 下一個/上一個兄弟元素節(jié)點
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;
DOM 更改
// 添加、刪除子元素
ele.appendChild(el);
ele.removeChild(el);
// 替換子元素
ele.replaceChild(el1, el2);
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);
屬性操作
// 獲取一個{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();
