JavaScript – W3C DOM

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

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

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中的文档方法

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

序号	属性及描述
1	createAttribute( name) 返回具有指定名称的新创建的 Attr 节点。 Ex − document.createAttribute( name)
2	createComment( text) 创建并返回一个包含指定文本的新注释节点。 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 属性值为指定值的此文档元素，如果在文档中不存在这样的元素，则返回 null。 Ex − document.getElementById( id)
7	getElementsByName( 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)

示例

使用 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">这是主标题</h1>
      <p>单击以下内容以查看结果:</p>

      <form id = "form1" name = "FirstForm">
         <input type = "button" value = "单击我" onclick = "myFunc();" />
         <input type = "button" value = "取消">
      </form>

      <form d = "form2" name = "SecondForm">
         <input type = "button" value = "不要单击我"/>
      </form>      
   </body>
</html>

注意 − 这个例子返回的是表单和元素的对象，我们需要使用这些对象的属性来访问它们的值，这些属性在本教程中没有涉及。