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)