動態HTML和W3C文件物件模型
阿新 • • 發佈：2019-01-02
1、Web標準
1994年，Tim創立了全球資訊網聯盟（World Wide Web Consortium，W3C），該組織致力於Web技術演變的管理。它主要有三個目標：
- 提供通用的訪問技術，讓任何人都能使用Web
- 開發相應的軟體環境，允許使用者利用Web
- 指導Web的發展，考慮由Web引發的法律、社會和經濟問題。
HTML4.01是一個相對穩定的HTML標準，其中包含了大量的特性，20世紀90年代後期，引入了一批新標準來控制HTML的呈現方式（樣式表）和HTML在指令碼中的表示方式（DOM）。還建立了其它標註，如可擴充套件標記語言（XML）。
HTML標準由W3C維護。這個標準看起來簡單，但是每一版本都在引入新的元素，目前已經到了HTML5版本了。XML是一個建立標記語言的的標準，XML本身看上去與HTML非常相似，但二者存在本質上的區別。XML一個用途是用來表示資料，普通的資料庫可以儲存資訊，但是不允許其儲存的項包含結構資訊。XML則可以使用標記語言的元素結構來表示任何型別的資料。XHTML1.0則是XML與HTML標準的結合。
XHTML還提供了一種通用的方法來定義自己的元素，而不能隨意的新增元素，可以使用XML DTD和XML名稱空間。這特別適用於新的標記語言。因此，任何熟悉HTML的人都應能檢視XHTML頁面。下面列出了XHTML與HTML的主要區別：
- XHTML建議在檔案頂部的第一行放置一個XML的宣告，其格式為：<?xml version='1.0'?>
- 在檔案頂部還必須提供一個DTD宣告，指出所使用的DTD標準的版本。
- 在HTML元素中必須新增對XML名稱空間的引用。
- 由於XML區分大小寫，因此所有的XHTML元素名都必須是小寫。
- <head/>和<body/>元素必須總是包含在XHTML文件中。
- 必須正確的關閉和巢狀標記。只需要一個標記時，如換行標記，必須用一個斜線關閉該標記，例如<br/>。
- 屬性的值必須用引號括起來。
2、文件物件模型
如前所述：文件物件模型（DOM）是一種獨立於瀏覽器型別來表示文件的方法。它允許開發人員通過一組通用的物件、屬性、方法和事件來訪問文件，並通過指令碼動態修改網頁內容。可以使用幾種指令碼語言，如JavaScript 和 VBScript。
2.1 DOM標準
DOM標準不是最容易理解的一種標準。DOM(文件物件型別)和BOM（瀏覽器物件型別）之間存在兩個主要的區別，主要區別如下：- 首先，DOM僅包含Web頁面的文件，而BOM提供了瀏覽器各個領域的指令碼程式設計訪問，包括按鈕、標題欄以及頁面的某些部分。
- 其次，BOM專用於某個瀏覽器。瀏覽器是不能標準化的，因為它們必須提供有競爭力的特性。因此，需要另外一組屬性、方法甚至物件，才能使用JavaScript操作它們。
2.2 基本的DOM物件
| 物件 | 說明 |
| Node | 文件中每個節點都有自己的Node物件 |
| NodeList | 這是Node物件的列表 |
| NamedNodeMap | 允許按名稱（而不是按索引）訪問所有的Node物件 |
2.3 高階DOM物件
| 物件 | 說明 |
| Document | 文件的根節點 |
| DocumentType | XML文件的DTD或模式模型 |
| DocumentFragment | 文件部分的臨時儲存空間 |
| EntityReference | XML文件中的實體引用 |
| Element | 文件中的一個元素 |
| Attr | 文件中元素的一個屬性 |
| ProcessingInstruction | 處理指令 |
| Comment | XML文件或HTML文件中的註釋 |
| Text | 構成元素子節點的純文字 |
| CDATASection | XML文件中的CDATA部分 |
| Entity | DTD中未解析的實體 |
| Notation | DTD中宣告的記號 |
2.3 DOM物件及其屬性和方法
如果要討論DOM中所有物件的屬性和方法，則需要很長的篇幅。本文中則只針對於Node、Element和 Document。通過這三個物件，就可以建立、修改和導航樹形結構。本文中只討論最常用的屬性和方法，使用它們實現指定的功能。2.3.1 Document物件及方法
Document引用型別提供了各種屬性和方法，非常有助於編寫DOM的指令碼。其方法允許查詢單個元素或者元素組，建立新元素、屬性和文字節點。任何DOM編寫指令碼人員都應該瞭解這些方法好屬性，因為它們確實非常有用。Document物件的方法可能是最重要的。儘管我們有許多工具，但只有Document物件的方法可以在頁面上查詢、建立和刪除元素。 查詢一個或多個元素| doucment物件的方法 | 說明 |
| getElementById(idValue) | 根據所提供的元素的id值，返回對該元素的引用（節點） |
| getElementsByTagNmae(tagName) | 根據引數中提供的標記，返回對一組元素的引用（節點列表） |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getElementByTagName() Test</title>
</head>
<body>
<span>Below is a table</span>
<table border="1">
<tr>
<td>ROW 1 CELL 1</td>
<td>ROW 1 CELL 2</td>
</tr>
<tr>
<td>ROW 2 CELL 1</td>
<td>ROW 2 CELL 2</td>
</tr>
</table>
</body>
<script type="text/javascript">
var tagElements=document.getElementsByTagName("td");
var length=tagElements.length;
for(var i=0;i<length;i++)
{
tagElements[i].style.color="red";
}
</script>
</html>
查詢一個或多個元素
| Document物件的方法 | 說明 |
| createElement(elementName) | 使用指定的標記名建立一個元素節點，返回所建立的元素 |
| creatTextNode(text) | 建立並返回包含所提供文字的文字節點 |
var pElement = document.creatElement("p");
var text = document.creatTextNode("This is some text.");| Document物件屬性 | 說明 |
| documentElement | 返回對文件最外層元素的引用（即根元素） |
2.3.2 Element物件及方法
Element物件非常簡單，與Node物件相比尤其如此，它只有幾個成員（屬性和方法）。| 成員名 | 說明 |
| tagName | 返回元素的標記名稱 |
| getAttribute() | 獲取屬性的值 |
| setAttribute() | 用指定的值設定屬性 |
| removeAttribute() | 從元素中刪除指定的屬性及其值 |
如果要設定元素中除style之外的其他屬性，應使用Element物件專用於DOM的方法。可以用於返回和修改HTML元素屬性的內容的3個方法是getAttribute()、setAttribute()和removeAttribute()。下面程式碼簡要說明下這幾個方法的使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>getAttribute() Test</title>
</head>
<body>
<p id="paragraph1"> This is some text.</p>
<script type="text/javascript">
var pElement = document.getElementById("paragraph1");
pElement.setAttribute("align","center");
alert(pElement.getAttribute("align"));
pElement.removeAttribute("align");
</script>
</body>
</html>在瀏覽器開啟後。螢幕中央會顯示<p/>元素的文字，警告框真現實文字center，點選OK按鈕後，文字恢復左對齊。
2.3.3 Node物件及方法
從網頁中獲取了元素後，如果要在頁面中一個元素一個元素或一個屬性一個屬性地訪問，該怎麼辦？這需要返回到更低層次。要遍歷元素、屬性和文字，需要沿著樹形結構的節點移動。至於節點包含什麼內容，甚至節點是什麼型別，都是無關緊要的。因此需要使用DOM核心規範的一個物件Node，整個樹形結構都是由這些基本的Node物件構成的。Node物件：導航DOM
下表列出了Node物件的常用屬性，這些屬性提供了節點的資訊，即當前節點是元素、屬性還是文字，並可以從一個節點移到另一個節點。
| Node物件的屬性 | 物件屬性的說明 |
| firstChild | 返回元素的第一個子節點 |
| lastChild | 返回元素的最後一個子節點 |
| previousSibling | 在同級子節點中，返回當前子節點的前一個兄弟節點 |
| nextSibling | 在同級子節點中，返回當前子節點的後一個兄弟節點 |
| ownerDocument | 返回包含節點的文件的根節點 |
| parentNode | 返回樹形結構中包含當前節點的元素 |
| nodeName | 返回節點的名稱 |
| nodeType | 返回一個數字，表示節點的型別 |
| nodeValue | 以純文字格式獲取或設定節點的值 |
下表列出了Node物件的方法：
| Node物件的方法 | 說明 |
| appendChild(newNode) | 將一個新的Node物件新增到子節點的末尾。該方法返回追加的節點 |
| cloneNode(cloneChildren) | 返回當前節點的一個副本。該方法的引數是一個布林值，如果該值為 true，則克隆當前節點及其所有的子節點。如果該值為false，則僅克 隆當前節點，而不包含其子節點。 |
| hasChildNodes() | 如果節點上有子節點，則返回true，否則返回false。 |
| insertBefore(newNode,referenceNode) | 在referenceNode指定的節點前，插入一個node物件，返回新插入的節點。 |
| removeChild(childNode) | 從Node物件的子節點列表中，刪除一個子節點，並返回刪除的節點。 |