DOM是什么東西？他有什么用？
這是很多新入職的開(kāi)發(fā)人員很容易出現(xiàn)困惑的問(wèn)題。通常我們?cè)陂_(kāi)發(fā)的時(shí)候，只想著怎么把這個(gè)需求做出來(lái)，面對(duì)其原理，似乎很少人去真正的剖析過(guò)。
需要了解DOM，就需要從HTML開(kāi)始了解。html就像是我們使用的word一樣，為我們展示出必要的信息，但如果html失去了DOM這個(gè)東西，這個(gè)word就像只讀文件一般，只可遠(yuǎn)觀，改都改不來(lái)。而DOM的出現(xiàn)解決了這類(lèi)問(wèn)題。
DOM是一個(gè)具有使頁(yè)面可以增加、移除、修改的編程接口。他讓頁(yè)面具有像word一樣可以刪刪改改的功能。工程師只要通過(guò)DOM對(duì)節(jié)點(diǎn)進(jìn)行修改，就可以得到變化的頁(yè)面效果。
DOM定義的方法
節(jié)點(diǎn)層次：DOM是有一定的節(jié)點(diǎn)層次的。我們?cè)跒g覽器“查看源碼”當(dāng)中可以看到，每項(xiàng)內(nèi)容都是由一個(gè)個(gè)標(biāo)簽包裹起來(lái)的（也被稱(chēng)之為“標(biāo)簽語(yǔ)言”），并且具有一定的層級(jí)關(guān)系。這就可以通過(guò)索引頁(yè)面來(lái)找到自己需要的html內(nèi)容。
Node類(lèi)型：每個(gè)標(biāo)簽的名字不同，DOM將其所處的位置和功能不同，定義了12種類(lèi)型，這樣的定義作用旨在定義節(jié)點(diǎn)的類(lèi)型，并讓瀏覽器清楚節(jié)點(diǎn)的作用。開(kāi)發(fā)者可以通過(guò)：someNode.nodeType來(lái)獲取當(dāng)前節(jié)點(diǎn)的類(lèi)型。
既然DOM是用來(lái)操作節(jié)點(diǎn)的，那么介紹一些比較常見(jiàn)的屬性吧。
DOM屬性
以下內(nèi)容，請(qǐng)?jiān)谇懊婕由?code>someNode
-
.nodeName和.nodeValue了解節(jié)點(diǎn)的具體信息 - 節(jié)點(diǎn)關(guān)系
-
.childNode[0]=> 節(jié)點(diǎn)關(guān)系 -
.parentNode=> 節(jié)點(diǎn)關(guān)系：父節(jié)點(diǎn)、子節(jié)點(diǎn)、最后節(jié)點(diǎn)等等 -
.lastChild=> 節(jié)點(diǎn)關(guān)系
-
- 操作節(jié)點(diǎn)
-
.appendChild()=> 插入節(jié)點(diǎn) -
.insertBefore(newNode, null)=> 插入后成為最后一個(gè)子節(jié)點(diǎn) -
.insertBefore(newNode, someNode.firstChild)=> 插入成為最后一個(gè)子節(jié)點(diǎn) -
.insertBefore(newNode, someNode.lastChild)=> 插入到最后一個(gè)子節(jié)點(diǎn)前面
-
-
.replaceChild()替換節(jié)點(diǎn) -
.removeChild()移除節(jié)點(diǎn)
介紹DOM的基礎(chǔ)知識(shí)之后，我們同樣來(lái)盤(pán)一盤(pán)DOM具備的各種類(lèi)型吧。
Document類(lèi)型
document，英語(yǔ)單詞的意思文檔，文件的意思。那么這個(gè)類(lèi)型的主要作用就在于不僅可以取得頁(yè)面有關(guān)的信息而且還能操作頁(yè)面的外觀及其底層結(jié)構(gòu)。所以他能夠操作整個(gè)HTML頁(yè)面。作者可以使用document.***來(lái)獲得。
廢話(huà)不多說(shuō)，我們來(lái)看看如何使用吧。
document屬性
以下內(nèi)容，請(qǐng)?jiān)谇懊婕由?code>document
- 節(jié)點(diǎn)訪問(wèn)
-
.documentElement()訪問(wèn)<html>節(jié)點(diǎn) -
.body()訪問(wèn)<body>節(jié)點(diǎn)
-
- 文檔信息
-
.title文檔標(biāo)題 -
.URL完整URL -
.domain域名
-
- 查找元素
-
.getElementById()取得元素為ID -
.getElementByTagName()取得元素標(biāo)簽名 -
.getElementByName()取得元素name
-
- DOM一致性檢測(cè)（查看當(dāng)前瀏覽器支持的版本）
-
.implementation.hasFeature("XML", "1.0”)返回：true 或false
-
- 文檔寫(xiě)入
-
.write()原樣寫(xiě)入 -
.Writeln()在末尾加換行符（\n） -
.open()打開(kāi)網(wǎng)頁(yè)輸出流 -
.close()關(guān)閉網(wǎng)頁(yè)輸出流
-
總結(jié)
對(duì)DOM的理解，同時(shí)對(duì)document的分解，可以發(fā)現(xiàn)以前難以處理的事情，似乎現(xiàn)在已經(jīng)想到了解決方法了。比如修改文檔標(biāo)題。
