1. 程式人生 > >JavaScript 文件物件模型

JavaScript 文件物件模型

  文件物件模型(Doucment Object Model,DOM)是表示文件(如HTML文件、XML文件)和訪問、操作構成文件的各種元素的應用程式介面。

  在DOM中,HTML文件的層次結構被表示成樹形結構。樹的節點表示文件中的各種內容。DOM樹形結構是各種型別的Node物件的樹。Node介面為遍歷和操作樹定義了屬性和方法。Node物件的childNodes屬性將返回子節點的列表NodeList物件,firstChild、lastChild、nextSibling、previousSibling和parentNode屬性提供了遍歷樹的方法。appendChild()、removeChild()、replaceChild(old,new)和insertBefore()方法,可以給文件樹新增節點或從文件中刪除節點。
(注意,在使用appendChild()方法時,如果引數是文件中已存在的節點,該方法會先從文件中去掉該節點)
  文件樹中不同型別節點由特定Node子介面表示,每個Node物件都有nodeType屬性,指定節點的型別。常用節點型別:
    介面 | nodeType常量 | nodeType值
    Element  | Node.ELEMENT_NODE | 1
    Text | Node.TEXT_NODE | 3
    Document | Node.DOCUMENT_NODE | 9
    Comment  | Node.COMMENT_NODE | 8
    DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11
    Attr | Node.ATTRIBUTE_NODE | 2
  DOM樹的根節點是個Document物件,它的documentElement屬性引用表示文件根元素的Element物件。大部分DOM樹由表示標記(如<html>和<i>)的Element物件和表示文字串的Text物件構成。

  Element介面的getAttribute()方法、setAttribute()方法和removeAttribute()方法可以查詢、設定和刪除一個元素的性質。還可以呼叫getAttributeNode()方法(該方法使用不適很方便),返回一個表示性質和它的值的Attr物件(Attr介面定義了specified屬性,可以判斷文件中是否直接指定了該性質,或判斷它的值是否是預設值)。但要注意,Attr物件不出現在元素的childNodes[]陣列中,不像Element和Text節點那樣是文件樹的一部分。DOM標準允許通過Node介面的attributes[]陣列訪問Attr節點,但IE定義了不相容的attributes[]陣列。

  DOM標準可以與XML文件和HTML文件一起使用。DOM的核心API(Node、Element、Document和其他介面)相對通用,可以應用於這兩種型別的文件。DOM標準還包括HTML文件專有的介面(HTML***Element)。
  DOM標準的HTML部分為其他所有HTML標記都定義了相應的介面。對大部分HTML標記來說,這些介面只是提供了一套映象他們的HTML性質的屬性集合。此外,某些介面還定義了其他的屬性和方法(如HTMLFormElement介面定義了submit()和reset()方法及length屬性)。

  HTML專有DOM標準有一套命名規則,HTML專有介面的屬性應該以小寫字母開頭,如果屬性名有多個單詞,第二個單詞後的每個單詞首個字母大寫。當HTML性質名與JavaScript關鍵字發生衝突時,應在性質加字首"html"來避免衝突。這個規則的一個例外是class性質,可以轉化成HTMLElement的className屬性。

  DOM標準有兩個版本(或說“級別”)。不同瀏覽器對DOM標準的支援程度有所不同,IE5以上版本支援使用HTML文件的基本1級DOM介面,Netscape支援2級DOM介面,如下程式碼可以檢測瀏覽器支援的DOM介面級別:
     if(document.implementation &&
         document.implementation.hasFeature &&
         document.implementation.hasFeature("html","1.0")){
         .......       //如果支援HTML DOM1級  執行
     }
  關於DOM標準的級別的資源:
    W3C致力開發DOM實現的開放資源測試組,http://www.w3c.org/DOM/Test/
    Mozilla組織測試套件,http://www.mozilla.org/quality/browser_sc.html
    Netscape公司釋出的測試套件,包括2級DOM的測試,http://developer.netscape.com/evangelism/tools/testsuites/

  IE中的DOM一致性P335

  DOM API提供了引用文件中元素的方法:
  getElementsByTagName(var tagName),返回NodeList物件(NodeList物件行為與陣列相似,我們可以認為這個函式返回一個以tagName指定的元素名組成的陣列),它可以獲得任何型別的HTML元素的列表。注意,因為HTML標記不區分大小寫,所以傳遞給該方法的字串也不區分大小寫。如果把"*"傳給getElementsByTagName()方法,將返回文件中所有元素的列表,順序以在文件中出現的順序。
  getElementById(var id),該方法返回一個元素,該元素具有匹配的id屬性。
  (Document物件和Element物件都具有這兩個方法)

  Text節點的data域包含這個節點中所有字串。document.createTextNode()方法可以建立新的Text節點。Text節點還可以用appendData()、insertData()、deleteData()和replaceData()方法新增、插入、刪除或替換一個Text節點中的文字。

  document.createElement(var eleName)方法可以建立新的<eleName>元素。

  我們還可以呼叫element.setAttribute(),如**.setAttribute("align","center"),設定**的align屬性值為center,它和**.align=center有同樣的效果。

  把任何元素的innerHTML屬性設定為一個HTML文字串,都會使那段HTML被解析並插入以作為元素的內容。

  DOM核心的API定義了DocumentFragment物件,作為使用Document節點組的快捷方法。DocumentFragment是一種特殊型別節點,它自身不出現在文件中,只作為連續節點集合的臨時容器,並允許將這些節點作為一個物件來操作。當把一個DocumentFragment插入文件時(用Node物件的appendChild()、insertBefore()或replaceChild()),插入的不是DocumentFragment自身,而是它的所有子節點。如顛倒n節點順序的reverse()方法:
    function reverse(n){
      var inputTag = n.childNodes;
      var temp = document.createDocumentFragment();
      while(n.lastChild){
        temp.appendChild(n.lastChild);
      }
      n.appendChild(temp);
    }
  注意,在把DocumentFragment插入文件時,段的子節點移入文件中,插入後段是空的。

  Traversal和Range API
  Traversal API定義了遍歷文件和篩選出使用者不感興趣節點的高階方法。Range API定義了操作連續範圍內的文件內容的方法,即使那些內容不在節點的邊界處開始或結束。