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 节点，其名称为指定名称。例 − document.createAttribute(name)
2	createComment(text) 创建并返回一个新的 Comment 节点，其中包含指定的文本。例 − document.createComment(text)
3	createDocumentFragment() 创建并返回一个空的 DocumentFragment 节点。例 − document.createDocumentFragment()
4	createElement(tagName) 创建并返回一个新的 Element 节点，其标签名称为指定的标签名称。例 − document.createElement(tagName)
5	createTextNode(text) 创建并返回一个新的 Text 节点，其中包含指定的文本。例 − document.createTextNode(text)
6	getElementById(id) 返回此文档中其 id 属性具有指定值的 Element，如果文档中不存在此类 Element，则返回 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>

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

javascript_html_dom.htm

打印页面

序号	属性和描述
1	body 对表示此文档的 <body> 标记的 Element 对象的引用。例 − document.body
2	defaultView 它是只读属性，表示显示文档的窗口。例 − document.defaultView
3	documentElement 对文档的 <html> 标记的只读引用。例 − document.documentElement8/31/2008
4	implementation 它是只读属性，表示表示创建此文档的实现的 DOMImplementation 对象。例 − document.implementation

序号	属性和描述
1	createAttribute(name) 返回一个新创建的 Attr 节点，其名称为指定名称。例 − document.createAttribute(name)
2	createComment(text) 创建并返回一个新的 Comment 节点，其中包含指定的文本。例 − document.createComment(text)
3	createDocumentFragment() 创建并返回一个空的 DocumentFragment 节点。例 − document.createDocumentFragment()
4	createElement(tagName) 创建并返回一个新的 Element 节点，其标签名称为指定的标签名称。例 − document.createElement(tagName)
5	createTextNode(text) 创建并返回一个新的 Text 节点，其中包含指定的文本。例 − document.createTextNode(text)
6	getElementById(id) 返回此文档中其 id 属性具有指定值的 Element，如果文档中不存在此类 Element，则返回 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)