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