JavaScript - W3C DOM

此文档对象模型允许访问和修改所有文档内容，并由万维网联盟 (W3C) 标准化。几乎所有现代浏览器都支持此模型。

W3C DOM 标准化了旧版 DOM 的大部分功能，并添加了新功能。除了支持 forms[ ]、images[ ] 以及 Document 对象的其他数组属性外，它还定义了允许脚本访问和操作任何文档元素(而不仅仅是表单和图像等特殊用途元素)的方法。

W3C DOM 中的文档属性

此模型支持旧版 DOM 中可用的所有属性。此外，以下是可使用 W3C DOM 访问的文档属性列表。

序号	属性和说明
1	body 对表示 <body> 的 Element 对象的引用此文档的标签。 Ex − document.body
2	defaultView 其只读属性，表示显示文档的窗口。 Ex − document.defaultView
3	documentElement 对 <html> 的只读引用文档的标签。 Ex − document.documentElement 2008年8月31日
4	implementation 它是一个只读属性，表示 DOMImplementation 对象，该对象代表创建此文档的实现。 Ex − document.implementation

W3C DOM 中的文档方法

此模型支持旧版 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 节点。示例 - document.createTextNode( text)
6	getElementById( id) 返回此文档中 id 属性具有指定值的元素;如果文档中不存在此类元素，则返回 null。示例 - 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 支持此方法示例 − 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>

注意 − 此示例返回表单和元素的对象，我们必须使用本教程中未讨论的对象属性来访问它们的值。

javascript_html_dom.html