Javascript-DOM筆記

標籤：pos   選擇   setw   idt   父節點   ntb   new   替換   動態操作   

參考

javascript原生dom操作方法

JavaScript原生的dom操作方法

第一類:節點尋找相關方法和屬性

document/父節點.getElementById()
document/父節點.getElementsByTagName()
document/父節點.getElementsByName() //IE8以下不相容

稱作:dom0級方法

.擷取元素的屬性(常用) getAttribute()
.設定元素的屬性(常用) setAttribute()

其它,dom擴充中還提供了以下方法：

querySelector()
querySelectorAll()
matchesSelector()
上述方法接收一個css選擇符對

相關參考

考慮空白符的相關層次關係屬性
.訪問子節點屬性 dom對象.childNodes; //注意,由於相容性問題,有所謂"空白項"問題
例子:
var childnode = document.getElementsByTagName("ul")[0].childNodes;

.訪問父節點 parentNode

JavaScript dom對象常用屬性

. innerHtml  dom對象.innerHtml

. nodeType

. nodeName

. offsetWidth  offsetHeight

.scorllHeight

 

document.documentElement.offsetWidth || document.body.offsetWidth;document.documentElement.offsetHeight;

 

 

 

第二類:動態動作節點相關方法

.建立元素節點 createElement() 或 document.createElement()

.建立文本節點 createTextNode()

.添加子節點：父元素.appendChild()

.插入新節點: 父元素.insertBefore(newNode,relNode)

.替換節點：父元素.replaceChild(newNode,oldNode)

.刪除節點：父元素.removeChild(node)

.複製節點：節點.cloneNode() 傳入true參數代表深度複製，否則為淺複製

Javascript-DOM筆記