DOM整理

peixn 發(fā)布于2019-08-20 18:34 / 1301人閱讀

摘要：元素節(jié)點(diǎn)類型節(jié)點(diǎn)類型數(shù)值元素節(jié)點(diǎn)屬性節(jié)點(diǎn)文本節(jié)點(diǎn)文檔節(jié)點(diǎn)和屬性元素節(jié)點(diǎn)的始終為，始終保存元素的標(biāo)簽名。返回類數(shù)組對(duì)象。

1.元素節(jié)點(diǎn)類型

節(jié)點(diǎn)類型	數(shù)值
元素節(jié)點(diǎn)	1
屬性節(jié)點(diǎn)	2
文本節(jié)點(diǎn)	3
文檔節(jié)點(diǎn)	9

2.nodeName和nodeValue屬性
元素節(jié)點(diǎn)的nodeValue始終為null，nodeName始終保存元素的標(biāo)簽名。
3.childNodes
element.childNodes返回類數(shù)組對(duì)象。
4.Document類型

屬性	值
nodeType	9
nodeName	"#document"
nodeValue	null
parentNode	null

5.document.referrer // 取得來(lái)源頁(yè)面的URL
6.Element類型

屬性	值
nodeType	1
nodeName	元素標(biāo)簽名
nodeValue	null
parentNode	Document和Element
子節(jié)點(diǎn)	Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
attributes	標(biāo)簽屬性集合

訪問(wèn)元素標(biāo)簽名，也可以通過(guò)tagName訪問(wèn)

7.Text類型

屬性	值
nodeType	3
nodeName	"#text"
nodeValue	節(jié)點(diǎn)所包含的文本
parentNode	一個(gè)Element
子節(jié)點(diǎn)	無(wú)

附：匯總

方法	說(shuō)明
element.childNodes	獲取元素所有子節(jié)點(diǎn)
element.nodeType	獲取元素節(jié)點(diǎn)類型
element.nodeName	獲取元素節(jié)點(diǎn)名稱
element.parentNode	獲取元素父節(jié)點(diǎn)
element.previousSibling	獲取元素上一個(gè)兄弟節(jié)點(diǎn)
element.nextSibling	獲取元素下一個(gè)兄弟節(jié)點(diǎn)
element.firstChild	獲取元素第一個(gè)子節(jié)點(diǎn)
element.lastChild	獲取元素最后一個(gè)子節(jié)點(diǎn)
element.hasChildNodes()	獲取元素是否存在子節(jié)點(diǎn)，存在返回true
element.ownerDocument	獲取整個(gè)文檔的文檔節(jié)點(diǎn)document
element.appendChild(newNode)	向元素最后位置添加子元素，如果newNode已經(jīng)是文檔中一部分，那么只是該節(jié)點(diǎn)變成最后一個(gè)子節(jié)點(diǎn)
element.insertBefore(newNode, null)	向元素指定位置(參照元素前)添加子元素，第一個(gè)參數(shù)為新元素，第二個(gè)參數(shù)為參照元素，如果第二個(gè)參數(shù)為null，那么該方法相當(dāng)于appendChild
element.replaceChild(newNode, oldNode)	替換子節(jié)點(diǎn)
element.removeChild(someNode)	移除子節(jié)點(diǎn)，該方法返回被移除的節(jié)點(diǎn)
element.cloneNode(true)	克隆節(jié)點(diǎn)，如果方法內(nèi)參數(shù)為true，則復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn)，如果為false，則復(fù)制節(jié)點(diǎn)
element.setAttribute()	設(shè)置特性
element.removeAttribute()	移除特性
element.getAttribute()	獲取特性
document.createTextNode("hello world!")	創(chuàng)建文本節(jié)點(diǎn)
document.createElement("div")	創(chuàng)建元素節(jié)點(diǎn)
document.createDocumentFragment()	創(chuàng)建文檔片段，該片段繼承了Node所有方法，通常用來(lái)執(zhí)DOM操作