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