由於DOM(文檔對象模型)概念的推出,這個API使HTML如虎添翼,但是有些學DHTML的朋友還是有些困撓,只是因爲目前的手冊的書寫不太科學,是按字母來分的,不便查閱.其實DOM中最關鍵是要掌握節點與節點之間的關係(between node and node),想學習DHTML中的DOM千萬不要從頭到尾地看遍所有的屬性和方法,你有三國時張松的"過目不忘"的本領嗎?沒有吧,那就聽我分析一下：
其實DOM教給我們的就是一個層次結構，你可以理解爲一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄……
根節點：
DOM把層次中的每一個對象都稱之爲節點（NODE），以HTML超文本標記語言爲例：整個文檔的一個根就是<html>,在DOM中可以使用document.documentElement來訪問它，它就是整個節點樹的根節點（ROOT）
子節點：
一般意義上的節點，根節點以下最大子節點就是主文檔區<body>了，要訪問到body標籤，在腳本中應該寫：
document.body
body區以內所有的文本及HTML標籤都是文檔的節點，分別稱爲文本節點、元素節點（或者叫標籤節點），大家知道HTML說到底只是文本而矣，不論怎麼樣的網頁必然由這兩個節點組成，也只能由這兩個節點組成
節點之間的關係：
節點之間的關係也是DOM中最重要的一個關節，如何正確地引用到節點對象，一定要清楚節點樹各個節點的相互描述方式，在DHTML裏，Javascript腳本就用了各個節點對象的一整套方法和屬性去描述另外的節點對象。
節點的絕對引用：
返回文檔的根節點
document.documentElement
返回當前文檔中被擊活的標籤節點
document.activeElement
返回鼠標移出的源節點
event.fromElement
返回鼠標移入的源節點
event.toElement
返回激活事件的源節點
event.srcElement
節點的相對引用：(設當前對節點爲node)
返回父節點
node.parentNode
node.parentElement
返回子節點集合（包含文本節點及標籤節點）
node.childNodes
返回子標籤節點集合
node.children
返回子文本節點集合
node.textNodes
返回第一個子節點
node.firstChild
返回最後一個子節點
node.lastChild
返回同屬下一個節點
node.nextSibling
返回同屬上一個節點
node.previousSibling
節點的各種操作：(設當前的節點爲node)
新增標籤節點句柄：
document.createElement(sNode) //參數爲要新添的節點標籤名，例：newnode=document.createElement("div");
1、添加節點：
追加子節點：
node.appendChild(oNode) //oNode爲生新增的節點句柄,例：node.appendChild(newnode)
應用標籤節點
node.applyElment(oNode,sWhere)//oNode爲生新增的節點句柄,sWhere有兩個值：outside / inside，加在當前節點外面還是裏面
插入節點
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改節點：
刪除節點
node.remove()
node.removeChild()
node.removeNode()
替換節點
node.replaceChild()
node.replaceNode()
node.swapNode()
2、複製節點：
返回複製複製節點引用
node.cloneNode(bAll)//bAll爲布爾值，true / false 是否克隆該節點所有子節點
3、節點信息
是否包含某節點
node.contains()
是否有子節點
node.hasChildNodes()
DOM對象的常用方法javascript
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章