1. 程式人生 > >DOM知識點匯總(入門者適用)

DOM知識點匯總(入門者適用)

nbsp 內容 reat ssi value info nod sibling rem

鐺~今天又沒啥事,來總結一下DOM的基礎知識。(公司沒活幹我也很無奈??)

?? 所有節點都有nodeType、nodeName、nodeValue三個屬性。

技術分享圖片

?? 節點關系

parentNode 父節點

childNodes 子節點集合

nextSibling 弟節點

previousSibling 兄節點

firstChild 第一個子節點

lastChild 最後一個子節點

hasChildNodes()判斷是否有子節點

?? 操作節點的方法

someNode.appendChild(newNode) //追加一個子節點 插入後成為最後一個子節點

insertBefore() //將節點插入某個位置

someNode.insertBefore(newNode,null) //插入後成為最後一個子節點

someNode.insertBefore(newNode, someNode.firstChild); //插入後成為第一個子節點

someNode.insertBefore(newNode, someNode.lastChild); //插入到最後一個子節點前面

replaceChild() //替換節點

someNode.replaceChild(newNode, someNode.firstChild); //替換掉第一個節點

someNode.replaceChild(newNode, someNode.lastChild); //替換掉最後一個節點

removeChild() //移除節點

someNode.removeChild(someNode.firstChild); //移除第一個節點

newNode = oldNode.cloneNode(true);//newNode 為oldNode的副本,帶子節點

newNode = oldNode.cloneNode(false);//newNode 為oldNode的副本,不帶帶子節點

?? 操作Element屬性

getAttribute(name);//獲取屬性

setAttribute(name,value);//設置

removeAttribute(name);//刪除

?? 創建節點 document.createElement(tagName); document.createTextNode(str);

emm內容好多~還是看書吧

DOM知識點匯總(入門者適用)