JavaScript W3C DOM

这个文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）进行标准化。这个模型由几乎所有现代浏览器支持。

W3C DOM 标准化了大部分传统 DOM 的功能，并添加了新的功能。除了支持文档对象的表单属性、图片属性和其他数组属性之外，它还定义了允许脚本访问和操作任何文档元素的方法，而不仅仅是像表单和图片这样的特定目的的元素。

W3C DOM 中的文档属性

这个模型支持所有传统 DOM 中可用的属性。此外，以下是可以使用 W3C DOM 访问的一些文档属性的列表。

序号	属性与描述
1	body 一个参考表示当前文档中`<body>`标签的Element对象的属性。示例 − document.body
2	defaultView 一个只读属性，表示文档所在窗口的对象。示例 − document.defaultView
3	documentElement 一个只读属性，表示文档中`<html>`标签的对象。示例 − document.documentElement8/31/2008
4	implementation 一个只读属性，表示创建当前文档的DOMImplementation对象的实现。示例 − document.implementation

在W3C DOM中的文档方法

这个模型支持所有Legacy DOM中可用的方法。此外，下面是W3C DOM支持的方法列表。

Sr.No.	属性与描述
1	createAttribute(name) - 返回一个新创建的具有指定名称的Attr节点。示例：document.createAttribute(name)
2	createComment(text) - 创建并返回一个包含指定文本的新注释节点。示例：document.createComment(text)
3	createDocumentFragment() - 创建并返回一个空的DocumentFragment节点。示例：document.createDocumentFragment()
4	createElement(tagName) - 创建并返回一个具有指定标签名称的新元素节点。示例：document.createElement(tagName)
5	createTextNode(text) - 创建并返回一个包含指定文本的新文本节点。示例：document.createTextNode(text)
6	getElementById(id) - 返回此文档中具有指定id属性值的元素，如果文档中不存在此类元素，则返回null。示例：document.getElementById(id)
7	getElementsByName(name) - 返回文档中具有指定name属性值的所有元素节点的数组。如果未找到此类元素，则返回长度为零的数组。示例：document.getElementsByName(name)
8	getElementsByTagName(tagname) - 返回此文档中具有指定标签名称的所有Element节点的数组。 Element节点在返回的数组中的顺序与它们在文档源中的顺序相同。示例：document.getElementsByTagName(tagname)
9	importNode(importedNode, deep) - 创建并返回从其他文档中复制到此文档中的节点的副本，适合插入到此文档中。如果deep参数为true，则还递归复制节点的子节点。在DOM版本2中支持。示例：document.importNode(importedNode, deep)

示例

使用 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>

注意 − 此示例返回表单和元素的对象，并且我们需要通过使用这些对象属性来访问它们的值，这些属性在本教程中没有讨论。