動態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物件的屬性:獲取文件的根元素
要使用文件document物件的一個特殊屬性,該屬性返回文件的最外層元素。在HTML中,它應總是<html/>元素。返回這個元素的屬性是documentElement。
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物件的子節點列表中,刪除一個子節點,並返回刪除的節點。 |