W3C DOM
该文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）标准化。 几乎所有现代浏览器都支持此模型。
W3C DOM标准化了遗留DOM的大多数功能，并添加了新功能。 除了支持Document对象的forms []，images []和其他数组属性之外，它还定义了允许脚本访问和操作任何文档元素的方法，而不仅仅是形式和图像等特殊用途元素。
W3C DOM中的文档属性
此模型支持Legacy DOM中可用的所有属性。 此外，这里是一个文档属性列表，可以使用W3C DOM访问。
| Sr.No | 财产和描述 |
|---|---|
| 1 | body 对Element对象的引用，表示此文档的标记。 Ex - document.body |
| 2 | defaultView 它的只读属性，表示文档显示的窗口。 Ex - document.defaultView |
| 3 | documentElement 对文档的标记的只读引用。 Ex - document.documentElement8/31/2008 |
| 4 | implementation 它是一个只读属性，表示DOMImplementation对象，该对象表示创建此文档的实现。 Ex - document.implementation |
W3C DOM中的文档方法
此模型支持Legacy DOM中可用的所有方法。 此外，这里是W3C DOM支持的方法列表。
| Sr.No | 财产和描述 |
|---|---|
| 1 | createAttribute( name) 返回具有指定名称的新创建的Attr节点。 Ex - document.createAttribute（name） |
| 2 | createComment( text) 创建并返回包含指定文本的新Comment节点。 Ex - document.createComment（text） |
| 3 | createDocumentFragment( ) 创建并返回一个空的DocumentFragment节点。 Ex - document.createDocumentFragment（） |
| 4 | createElement( tagName) 创建并返回具有指定标记名称的新Element节点。 Ex - document.createElement（tagName） |
| 5 | createTextNode( text) 创建并返回包含指定文本的新Text节点。 Ex - document.createTextNode（text） |
| 6 | getElementById( id) 返回具有其id属性指定值的此文档的Element，如果文档中不存在此类Element，则返回null。 Ex - document.getElementById（id） |
| 7 | getElementsByName( name) 返回文档中具有其name属性指定值的所有元素的节点数组。 如果未找到此类元素，则返回零长度数组。 Ex - document.getElementsByName（name） |
| 8 | getElementsByTagName( tagname) 返回此文档中具有指定标记名称的所有Element节点的数组。 Element节点以与它们在文档源中出现的顺序相同的顺序出现在返回的数组中。 Ex - document.getElementsByTagName（tagname） |
| 9 | importNode( importedNode, deep) 从适合插入此文档的其他文档创建并返回节点的副本。 如果deep参数为true，则它也递归地复制节点的子节点。 在DOM版本2中受支持 Ex - document.importNode（importedNode，deep） |
例子 (Example)
使用W3C DOM可以很容易地操作（访问和设置）文档元素。 您可以使用任何方法，如getElementById ， getElementsByName或getElementsByTagName 。
以下是使用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>
NOTE - 此示例返回表单和元素的对象，我们必须使用本教程中未讨论的那些对象属性来访问它们的值。
新页面打开