DOM

選取文檔元素

• 用指定的id屬性
  • getElementById(id)
  • 返回element對(duì)象
• 用指定的name屬性
  • getElementByName(name)
  • 返回NodeList對(duì)象
• 用指定的標(biāo)簽名字
  • getElementByTagName(tag_name)
  • 返回NodeList對(duì)象
• 用指定的CSS類(lèi)
  • 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

只讀的類(lèi)數(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)的類(lèi)型。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)簽名，以大寫(xiě)形式表示

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);