发布于 2015-07-31 15:20:14 | 184 次阅读 | 评论: 0 | 来源: 网络整理
本文档对象模型允许访问所有的文档内容和修改，由万维网联合会(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>
注意： 这个例子的形式和内容等返回对象，我们将不得不使用未在本教程中讨论这些对象的属性来访问它们的值。