本文檔對象模型允許訪問所有的文檔內(nèi)容和修改,由萬維網(wǎng)聯(lián)合會(W3C)規(guī)范。幾乎所有的現(xiàn)代瀏覽器都支持這種模式。
在W3C DOM規(guī)范的大部分傳統(tǒng)DOM的功能,而且還增加了新的重要的功能。除了支持forms[ ], images[ ]和文檔對象的其它數(shù)組屬性,它定義了方法,使腳本來訪問和操縱的任何文檔元素,而不只是專用元件狀的表單和圖像。
此模型支持所有傳統(tǒng)DOM提供的屬性。此外,這里是文檔屬性,可以使用W3C DOM訪問列表:
| 屬性 | 介紹和示例 |
|---|---|
| body |
引用元素對象,表示該文件的<body>標簽 示例: document.body |
| defaultView |
其只讀屬性,并表示在其上顯示所述文檔的窗口 示例: document.defaultView |
| documentElement |
只讀參考文件的<html>標簽 示例: document.documentElement8/31/2008 |
| implementation |
其只讀屬性,代表了DOMImplementation的對象,表示創(chuàng)建該文件的實現(xiàn) 示例: document.implementation |
此模型支持所有傳統(tǒng)DOM提供的方法。此外,這里是由W3C DOM支持的方法列表:
| 方法 | 介紹和示例 |
|---|---|
| createAttribute( name) |
返回具有指定名稱的新創(chuàng)建的Attr節(jié)點 示例: document.createAttribute( name) |
| createComment( text) |
創(chuàng)建并返回包含指定文本的新注釋節(jié)點 示例: document.createComment( text) |
| createDocumentFragment( ) |
創(chuàng)建并返回一個空的DocumentFragment節(jié)點 示例: document.createDocumentFragment( ) |
| createElement( tagName) |
創(chuàng)建并返回指定標簽名稱的新元素節(jié)點 示例: document.createElement( tagName) |
| createTextNode( text) |
創(chuàng)建并返回包含指定文本的新文本節(jié)點 示例: document.createTextNode( text) |
| getElementById( id) |
返回此文件有其id屬性指定的值,或空,如果沒有這樣的元素存在于文檔中的元素 示例: document.getElementById( id) |
| getElementsByName( name) |
返回的文檔中有自己的名字屬性的指定值的所有元素的節(jié)點的數(shù)組。如果沒有找到這樣的元素,則返回一個零長度數(shù)組 示例: document.getElementsByName( name) |
| getElementsByTagName( tagname) |
返回具有指定標簽名本文檔中的所有元素節(jié)點的數(shù)組。元素節(jié)點出現(xiàn)在他們出現(xiàn)在源文件相同的順序返回數(shù)組中 示例: document.getElementsByTagName( tagname) |
| importNode( importedNode, deep) |
創(chuàng)建并從其他文件是適于插入到本文檔返回節(jié)點的副本。如果參數(shù)deep是true,它遞歸拷貝節(jié)點的子節(jié)點。支持DOM2版 示例: document.importNode( importedNode, deep) |
這是(訪問和設(shè)置)使用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>
注意: 這個例子的形式和內(nèi)容等返回對象,我們將不得不使用未在本教程中討論這些對象的屬性來訪問它們的值。