Flyingis

Talking and thinking freely !
Flying in the world of GIS !

隨筆 - 156, 文章 - 16, 評(píng)論 - 589, 引用 - 0

數(shù)據(jù)加載中……

用 JavaScript 玩轉(zhuǎn) DOM Level 1

    作者：Flyingis

    DOM(The Document Object Model)將HTML轉(zhuǎn)換為XML文檔格式來(lái)表達(dá)，為動(dòng)態(tài)HTML編程提供了一種優(yōu)雅的解決方案。DOM編程可以使用多種語(yǔ)言（Java中可以使用SAX進(jìn)行XML編程），不論大家使用何種服務(wù)器端技術(shù)，JavaScript的DOM基礎(chǔ)編程還是需要掌握的，最常見(jiàn)的莫過(guò)于getElementById()，引用Prototype.js使用最多的也是$("")，但是要做好Web客戶(hù)端設(shè)計(jì)，我們需要了解更多更細(xì)。

    當(dāng)前各種主流瀏覽器對(duì)DOM Level 1標(biāo)準(zhǔn)支持的相對(duì)較好，我們就來(lái)看看在JavaScript中如何玩轉(zhuǎn)DOM Level 1。

    眾所周知，對(duì)于XML所有的節(jié)點(diǎn)都是Node類(lèi)型，整個(gè)XML文檔的根節(jié)點(diǎn)是一個(gè)Document，通過(guò)document.documentElement來(lái)獲取根節(jié)點(diǎn)，特殊的是在IE5.5中返回的是body元素。除此之外還有其他各式各樣的節(jié)點(diǎn)類(lèi)型，下面列舉幾個(gè)常見(jiàn)的：

    DocumentType:代表DTD的引用
    Element:代表XML中的各種標(biāo)簽，并且是整個(gè)文檔中唯一可以擁有屬性的節(jié)點(diǎn)
    Attr:節(jié)點(diǎn)屬性的鍵－值對(duì)
    Text:開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文本值
    Comment:代表XML的注釋節(jié)點(diǎn)

    JavaScript中定義了12個(gè)常量來(lái)分別代表12種不同的節(jié)點(diǎn)類(lèi)型，通過(guò)這些常量可以判斷當(dāng)前變量中的節(jié)點(diǎn)類(lèi)型，這些節(jié)點(diǎn)擁有一系列的屬性和方法，具體可以參考相關(guān)資料。需要說(shuō)明的是編程中用NodeList表示Node的集合，NamedNodeMap表示Attribute的集合，在獲取了節(jié)點(diǎn)、屬性之后可以將節(jié)點(diǎn)、屬性保存在NodeList、NameNodeMap中，如何獲取節(jié)點(diǎn)、屬性值在下面會(huì)談到。順便說(shuō)一下，雖然各種主流瀏覽器均支持DOM，但支持程度不一，Mozilla在這方面做的是最好的，它支持DOM Level 1和Level 2的所有標(biāo)準(zhǔn)，包括DOM Level 3部分標(biāo)準(zhǔn)，但是鑒于IE在市場(chǎng)中的主流地位，很多時(shí)候我們都需要做多種考慮。舉個(gè)例子：

// 標(biāo)簽中間是一空格

// 獲取tag節(jié)點(diǎn)

var tagId = document.getElementById("tagId");

// 在Mozilla中返回true，IE中返回false

alert(tagId.hasChildNodes());

    獲取屬性

    Element是所有節(jié)點(diǎn)中唯一擁有屬性的節(jié)點(diǎn)，NamedNodeMap表示Node節(jié)點(diǎn)的屬性，擁有以下方法：

    getNamedItem(name)
    removeNamedItem(name)
    setNamedItem(node)
    item(pos)

    各種方法涉及的對(duì)象是屬性節(jié)點(diǎn)名稱(chēng)，而不是屬性值。另外，通過(guò)下列方法可以實(shí)現(xiàn)同樣的功能：

    getAttribute(name)
    setAttribute(name, value)
    removeAttribute(name)

    獲取節(jié)點(diǎn)

    XML Node節(jié)點(diǎn)獲取方式大家應(yīng)該都非常熟悉了：

    getElementsByTagName()
    getElementsByName()
    getElementById()

    getElementsByTagName("*")可以獲取所有的Element，但是IE中，需要使用document.all來(lái)實(shí)現(xiàn)這個(gè)功能。IE6.0和Opera老版本的瀏覽器對(duì)于getElementsByName()的支持存在一些問(wèn)題，一般不推薦使用。對(duì)于getElementById("idVal")，如果Element的name和參數(shù)idVal匹配，會(huì)獲得該Element。

    創(chuàng)建和控制節(jié)點(diǎn)

    create***一系列的方法以及appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment()，提供了創(chuàng)建各種節(jié)點(diǎn)的功能，參考相關(guān)資料。

    上面討論是JavaScript對(duì)XML的操作，如果僅僅對(duì)HTML DOM進(jìn)行操作，編程相對(duì)更為簡(jiǎn)單，如HTML元素的屬性可以直接作為代碼的屬性：

var img = document.getElementBy("img");

// 設(shè)置圖片的路徑

img.setAttribute("src", "pic.gif");

// 輸出圖片的路徑，結(jié)果和上面設(shè)置的路徑相同

alert(img.src);

    同樣需要我們注意的是，IE對(duì)setAttribute()支持的并不是很好，在大多數(shù)情況下，應(yīng)該避免使用setAttribute()。

    除此之外，在HTML DOM中還有一系列的方法用來(lái)操作table，這里不作詳述，在自己現(xiàn)在設(shè)計(jì)的Web程序中已經(jīng)沒(méi)有使用了。

    看來(lái)要用JavaScript玩轉(zhuǎn)DOM Level 1不是件容易的事情，最主要的問(wèn)題還是在不同瀏覽器的兼容性上，表現(xiàn)最為“突出”的是IE，現(xiàn)在IE7已經(jīng)推出，但對(duì)于標(biāo)準(zhǔn)的兼容還是不盡如人意。經(jīng)常在Java、C#、JavaScript各種不同語(yǔ)言中操作XML，一段時(shí)間過(guò)后就容易迷糊，我自己就是這樣，上面將JavaScript相關(guān)的操作簡(jiǎn)單整理了一下，不是很詳細(xì)，畢竟都是大家熟悉的東西，但是在使用的時(shí)候看看就知道具體該怎么處理了，實(shí)在不行就參考相關(guān)的書(shū)籍和電子文檔吧。

    寫(xiě)這些的時(shí)候辦公室有人把電腦聲音打開(kāi)了看電視，還不停找話(huà)題和大家聊天，我戴上耳機(jī)也只能勉強(qiáng)用音樂(lè)擋住他放出的噪音，最鄙視這種人，和老板一個(gè)鼻孔出氣，啥都不是但老板信任，沒(méi)有辦法，碰到這樣的團(tuán)隊(duì)，不知道大家碰到這種情況是否和我一樣戴上耳機(jī)？呵～

posted on 2006-11-07 22:14 Flyingis 閱讀(5365) 評(píng)論(6) 編輯收藏所屬分類(lèi): Web 客戶(hù)端技術(shù)

評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

沙發(fā)，學(xué)習(xí)^+^

2006-11-07 22:18 | 馬嘉楠

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

幾個(gè)筆誤：
1.
“隨便說(shuō)一下，雖然各種主流瀏覽器均支持DOM，但支持程度不一。。”
應(yīng)該是“順便說(shuō)一下。。。”
2.
“XML Node節(jié)點(diǎn)獲取方式大家應(yīng)該都非常的屬性了”
應(yīng)該是“。。。非常的熟悉了”

2006-11-07 22:44 | 馬嘉楠

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

@馬嘉楠
昨天只想快點(diǎn)寫(xiě)完休息，留下了不少筆誤:)
謝謝你的提示，已經(jīng)更正。

2006-11-08 08:34 | Flyingis

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

獲取節(jié)點(diǎn)里面，不是getElementsById()，而是getElementById()。沒(méi)有“s”

2006-12-21 13:43 | 過(guò)路的

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1[未登錄](méi) 回復(fù) 更多評(píng)論

過(guò)路的說(shuō)的問(wèn)題還沒(méi)有改過(guò)來(lái)噢～～

2007-07-13 15:07 | 學(xué)習(xí)筆記

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

@學(xué)習(xí)筆記
謝謝提醒，已經(jīng)改過(guò)來(lái)了。

2007-07-16 08:50 | Flyingis

新用戶(hù)注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn)
相關(guān)文章: [DWR文檔] WEB-INF 參考 DWR 中文文檔用 JavaScript 玩轉(zhuǎn) DOM Level 1 [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(下) [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(中) [翻譯] 如何在 JavaScript 中實(shí)現(xiàn)拖放(上) JavaScript 隨筆匯集 [翻譯] "this" of JavaScript JavaScript 對(duì)象的反射及應(yīng)用使用 JSON 創(chuàng)建對(duì)象

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1[未登錄](méi) 回復(fù) 更多評(píng)論

# re: 用 JavaScript 玩轉(zhuǎn) DOM Level 1 回復(fù) 更多評(píng)論

Flyingis

用 JavaScript 玩轉(zhuǎn) DOM Level 1

評(píng)論

導(dǎo)航

公告

常用鏈接

留言簿(41)

我參與的團(tuán)隊(duì)

隨筆分類(lèi)

隨筆檔案

文章分類(lèi)

新聞檔案

.Net 技術(shù)

Ajax Technology

Eclipse Technology

ESRI Technology

GIS Technology

Java Technology

Linux Technology

Open Source

個(gè)人博客

精彩博客(技術(shù)類(lèi))

精彩博客(非技術(shù))

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜