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) | 根據參數中提供的標記，返回對一組元素的引用（節點列表） |
舉例說明getElementsByTagNmae(tagName)的使用，getElementsByTagNmae(tagName) 的工作方式與 getElementById(idValue)是相同的，但是它可以返回多個元素，所以應該在使用時指定特定元素的索引號。可以使用方括號來指定，另一種方法是使用NodeList對象的item() 方法，具體實現代碼及效果如下：
<!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對象的一個特殊屬性，該屬性返回文檔的最外層元素。在HTML中，它應總是<html/>元素。返回這個元素的屬性是documentElement。
| Document對象屬性 | 說明 |
| documentElement | 返回對文檔最外層元素的引用（即根元素） |
2.3.2 Element對象及方法
Element對象非常簡單，與Node對象相比尤其如此，它只有幾個成員（屬性和方法）。
| 成員名 | 說明 |
| tagName | 返回元素的標記名稱 |
| 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對象的子節點列表中，刪除一個子節點，並返回刪除的節點。 |