本文件物件模型允許存取所有的文件內容和修改,由全球資訊網聯合會(W3C)規範。幾乎所有的現代瀏覽器都支援這種模式。
在W3C DOM規範的大部分傳統DOM的功能,而且還增加了新的重要的功能。除了支援forms[ ], images[ ]和文件物件的其它陣列屬性,它定義了方法,使指令碼來存取和操縱的任何文件元素,而不只是專用元件狀的表單和影象。
此模型支援所有傳統DOM提供的屬性。此外,這裡是文件屬性,可以使用W3C DOM存取列表:
屬性 | 介紹和範例 |
---|---|
body |
參照元素物件,表示該檔案的<body>標籤 範例: document.body |
defaultView |
其唯讀屬性,並表示在其上顯示所述文件的視窗 範例: document.defaultView |
documentElement |
唯讀參考檔案的<html>標籤 範例: document.documentElement8/31/2008 |
implementation |
其唯讀屬性,代表了DOMImplementation的物件,表示建立該檔案的實現 範例: document.implementation |
此模型支援所有傳統DOM提供的方法。此外,這裡是由W3C DOM支援的方法列表:
方法 | 介紹和範例 |
---|---|
createAttribute( name) |
返回具有指定名稱的新建立的Attr節點 範例: document.createAttribute( name) |
createComment( text) |
建立並返回包含指定文字的新註釋節點 範例: document.createComment( text) |
createDocumentFragment( ) |
建立並返回一個空的DocumentFragment節點 範例: document.createDocumentFragment( ) |
createElement( tagName) |
建立並返回指定標籤名稱的新元素節點 範例: document.createElement( tagName) |
createTextNode( text) |
建立並返回包含指定文字的新文字節點 範例: document.createTextNode( text) |
getElementById( id) |
返回此檔案有其id屬性指定的值,或空,如果沒有這樣的元素存在於文件中的元素 範例: document.getElementById( id) |
getElementsByName( name) |
返回的文件中有自己的名字屬性的指定值的所有元素的節點的陣列。如果沒有找到這樣的元素,則返回一個零長度陣列 範例: document.getElementsByName( name) |
getElementsByTagName( tagname) |
返回具有指定標簽名本文件中的所有元素節點的陣列。元素節點出現在他們出現在原始檔相同的順序返回陣列中 範例: document.getElementsByTagName( tagname) |
importNode( importedNode, deep) |
建立並從其他檔案是適於插入到本文件返回節點的副本。如果引數deep是true,它遞回拷貝節點的子節點。支援DOM2版 範例: document.importNode( importedNode, deep) |
這是(存取和設定)使用W3C DOM文件元素很容易操縱。可以使用任何類似 getElementById,getElementsByName,orgetElementsByTagName 方法。
下面是存取使用W3C DOM方法文件屬性的一個例子:
<html> <head> <title> Document Title </title> <script type="text/javascript"> <!-- function myFunc() { var ret = document.getElementsByTagName("title"); alert("Document Title : " + ret[0].text ); var ret = document.getElementById("heading"); alert(ret.innerHTML ); } //--> </script> </head> <body> <h1 id="heading">This is main title</h1> <p>Click the following to see the result:</p> <form id="form1" name="FirstForm"> <input type="button" value="Click Me" onclick="myFunc();" /> <input type="button" value="Cancel"> </form> <form d="form2" name="SecondForm"> <input type="button" value="Don't ClickMe"/> </form> </body> </html>
注意: 這個例子的形式和內容等返回物件,我們將不得不使用未在本教學中討論這些物件的屬性來存取它們的值。