DOM
選取文檔元素
- 用指定的id屬性
- getElementById(id)
- 返回element對象
- 用指定的name屬性
- getElementByName(name)
- 返回NodeList對象
- 用指定的標簽名字
- getElementByTagName(tag_name)
- 返回NodeList對象
- 用指定的CSS類
- getElementByClassName(class)
- 返回NodeList對象
- 匹配指定的CSS選擇器
- queueSelectorAll()
- 返回NodeList對象
NodeList對象不是歷史文檔狀態的一個靜態快照，而通常是實時的，并且當文檔變化時它們所包含的元素列表能隨之改變，這是其中一個最重要和令人驚訝的特性。但是通過queueSelectorAll() 返回的NodeList對象并不是實時的。它包含在調用時刻選擇器所匹配的元素，但它并不更新后續文檔的變化。
文檔結構與遍歷
parentNode
該元素的父節點。
childNodes
只讀的類數組對象，它是該節點的子節點的實時表示
firstChild, lastChild
該節點的子節點中的第一個和最后一個，如果該節點沒有子節點則為null
nextSiblings, prevSublings
該節點的兄弟節點的前一個和下一個。
nodeType
該節點的類型。9代表Document節點，1代表Element節點，3代表Text節點，8代表Comment節點，11代表DocumentFragment節點。
nodeValue
Text節點或Comment節點的文本內容
nodeName
元素的標簽名，以大寫形式表示
setAttribute(name, value)
設置元素的屬性
getAttribute(name)
得到元素指定的屬性
hasAttribute(name)
檢測元素是否存在指定的屬性
removeAttribute(name)
刪除元素指定的屬性
innerHTML
獲取元素的內容(HTML字符串); 在元素上設置該屬性調用了Web瀏覽器的解析器，用新字符串內容的解析展現形式替換元素當前內容。
textContent, (IE innerText)
獲取純文本形式的元素內容，或者在文檔中插入純文本
創建，插入和刪除文本
document.createElement()
// 創建一個<script>元素
var newNode = document.createElement('script');
Element.cloneNode(boolean)
// 復制已有的節點
// 給方法傳遞true表示能夠遞歸的復制所有的后代節點，傳遞false表示只執行淺復制
var newNode = document.getElementById('app').cloneNode(true);
parent.appendChild(child)
// 在指定節點上插入新的節點使其成為那個指定節點的最后一個子節點
var child = document.createElement('script');
script.src = "xxxx";
document.head.appendChild(child);
parent.insertBefore(newNode, node)
// 在指定節點上插入新節點，新節點插入在已存在節點的前面
parent.insertBefore(child, parent.childNode[2]);
如果調用appendChild()或insertBefore()將已存在文檔中的一個節點再次插入，那個節點將自動從它當前的位置刪除并在新的位置重新插入：沒有必要顯式刪除節點
parent.removeChild(child)
// 刪除某個節點
var node = document.getElementById('app');
node.parentNode.removeChild(node);
parent.replaceChild(newNode, node)
// 替換某個節點
var node = document.getElementById('app');
var newNode = document.createElement("p");
newNode.textContent = "Hello world";
node.parentNode.replaceChild(newNode, node);
