Flyingis

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

隨筆 - 156, 文章 - 16, 評論 - 589, 引用 - 0

數據加載中……

用 JavaScript 玩轉 DOM Level 1

    作者：Flyingis

    DOM(The Document Object Model)將HTML轉換為XML文檔格式來表達，為動態HTML編程提供了一種優雅的解決方案。DOM編程可以使用多種語言（Java中可以使用SAX進行XML編程），不論大家使用何種服務器端技術，JavaScript的DOM基礎編程還是需要掌握的，最常見的莫過于getElementById()，引用Prototype.js使用最多的也是$("")，但是要做好Web客戶端設計，我們需要了解更多更細。

    當前各種主流瀏覽器對DOM Level 1標準支持的相對較好，我們就來看看在JavaScript中如何玩轉DOM Level 1。

    眾所周知，對于XML所有的節點都是Node類型，整個XML文檔的根節點是一個Document，通過document.documentElement來獲取根節點，特殊的是在IE5.5中返回的是body元素。除此之外還有其他各式各樣的節點類型，下面列舉幾個常見的：

    DocumentType:代表DTD的引用
    Element:代表XML中的各種標簽，并且是整個文檔中唯一可以擁有屬性的節點
    Attr:節點屬性的鍵－值對
    Text:開始標簽和結束標簽之間的文本值
    Comment:代表XML的注釋節點

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

// 標簽中間是一空格

// 獲取tag節點

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

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

alert(tagId.hasChildNodes());

    獲取屬性

    Element是所有節點中唯一擁有屬性的節點，NamedNodeMap表示Node節點的屬性，擁有以下方法：

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

    各種方法涉及的對象是屬性節點名稱，而不是屬性值。另外，通過下列方法可以實現同樣的功能：

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

    獲取節點

    XML Node節點獲取方式大家應該都非常熟悉了：

    getElementsByTagName()
    getElementsByName()
    getElementById()

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

    創建和控制節點

    create***一系列的方法以及appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment()，提供了創建各種節點的功能，參考相關資料。

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

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

// 設置圖片的路徑

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

// 輸出圖片的路徑，結果和上面設置的路徑相同

alert(img.src);

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

    除此之外，在HTML DOM中還有一系列的方法用來操作table，這里不作詳述，在自己現在設計的Web程序中已經沒有使用了。

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

    寫這些的時候辦公室有人把電腦聲音打開了看電視，還不停找話題和大家聊天，我戴上耳機也只能勉強用音樂擋住他放出的噪音，最鄙視這種人，和老板一個鼻孔出氣，啥都不是但老板信任，沒有辦法，碰到這樣的團隊，不知道大家碰到這種情況是否和我一樣戴上耳機？呵～

posted on 2006-11-07 22:14 Flyingis 閱讀(5365) 評論(6) 編輯收藏所屬分類: Web 客戶端技術

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

沙發，學習^+^

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

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

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

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

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

@馬嘉楠
昨天只想快點寫完休息，留下了不少筆誤:)
謝謝你的提示，已經更正。

2006-11-08 08:34 | Flyingis

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

獲取節點里面，不是getElementsById()，而是getElementById()。沒有“s”

2006-12-21 13:43 | 過路的

# re: 用 JavaScript 玩轉 DOM Level 1[未登錄] 回復 更多評論

過路的說的問題還沒有改過來噢～～

2007-07-13 15:07 | 學習筆記

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

@學習筆記
謝謝提醒，已經改過來了。

2007-07-16 08:50 | Flyingis

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: [DWR文檔] WEB-INF 參考 DWR 中文文檔用 JavaScript 玩轉 DOM Level 1 [翻譯] 如何在 JavaScript 中實現拖放(下) [翻譯] 如何在 JavaScript 中實現拖放(中) [翻譯] 如何在 JavaScript 中實現拖放(上) JavaScript 隨筆匯集 [翻譯] "this" of JavaScript JavaScript 對象的反射及應用使用 JSON 創建對象

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1[未登錄] 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

Flyingis

用 JavaScript 玩轉 DOM Level 1

評論

導航

公告

常用鏈接

留言簿(41)

我參與的團隊

隨筆分類

隨筆檔案

文章分類

新聞檔案

.Net 技術

Ajax Technology

Eclipse Technology

ESRI Technology

GIS Technology

Java Technology

Linux Technology

Open Source

個人博客

精彩博客(技術類)

精彩博客(非技術)

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

Flyingis

用 JavaScript 玩轉 DOM Level 1

評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1[未登錄] 回復 更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復 更多評論

導航

公告

常用鏈接

留言簿(41)

我參與的團隊

隨筆分類

隨筆檔案

文章分類

新聞檔案

.Net 技術

Ajax Technology

Eclipse Technology

ESRI Technology

GIS Technology

Java Technology

Linux Technology

Open Source

個人博客

精彩博客(技術類)

精彩博客(非技術)

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

# re: 用 JavaScript 玩轉 DOM Level 1 回復更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復更多評論

# re: 用 JavaScript 玩轉 DOM Level 1[未登錄] 回復更多評論

# re: 用 JavaScript 玩轉 DOM Level 1 回復更多評論