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