蜜果私塾：DOM，黑色藝術的終結者（1）
——緣起與元素的選取
文：阿蜜果
日期：2011-10-31
版權所有，轉載請注明出處
1、 緣起
1.1 DOM
DOM（Document Object Model，文檔對象模型）可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。
有一點很重要，DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用于任何編程語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個范圍。DOM技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的交互性大大地增強。
（1）DOM中的“D”
此處的“D”即“Document”，當創建了一個網頁并把它加載到Web瀏覽器中時，DOM就在幕后悄然而生，它將根據編寫的網頁文檔創建一個文檔對象。
（2）DOM中的“O”
此處的“O”即“對象”，“對象”是一個獨立的數據集合，與某個特定對象相關聯的變量被稱為該對象的屬性，可通過某個特別對象去調用的函數被稱為這個對象的方法。
JavaScript語言中的對象可以分為三種類型：
l 用戶定義對象（user-defined object）：由程序員自行創建的對象；
l 內建對象（native object）：內建在JavaScript語言的對象，如Array、Math和Date等；
l 宿主對象（host object）：由瀏覽器提供的對象，例如window對象（對應瀏覽器窗口本身）。
（3）DOM中的“M”
DOM將一個文檔表示為一個家譜樹，家譜樹的典型用法是表示一個人類家族的譜系并使用父、子、兄弟等記號來表示家族成員之間的關系。它可以將一些相對復雜的關系使用簡明地表示出來：一個特定的家族成員既是某些成員的父輩，又是另一位成員的子輩，同時還是另一位成員的兄弟。家譜樹也非常適合用來表示一份用HTML語言編寫的文檔。
一般的HTML文檔的根元素為html，有兩個子節點head和body，這兩者又有各自的子孫節點，例如head常見的子節點有meta和title，而meta和title由互為兄弟節點。
1.2 DHTML
DHTML（Dynamic HTML，動態的HTML）是相對傳統的靜態的HTML而言的一種制作網頁的概念。它其實并不是一門新的語言，它只是HTML、CSS和客戶端腳本JavaScript的一種集成。DHTML不是一種技術、標準或規范，只是一種將目前已有的網頁技術、語言標準整合運用，制作出能在下載后仍然能實時變換頁面元素效果的網頁設計概念。
DHTML背后的含義是：
l 利用HTML將元素標記為各種元素；
l 利用CSS設計將各有關元素的排版樣式并確定它們在窗口中的顯示位置；
l 利用JavaScript實時的操控和改變各有關樣式。
從理論上來說，利用DHTML，可以將復雜的動畫結果變成為非常容易。例如，在如下的實例中，首先使用HTML定義一個id為textdiv的頁面元素：
<div id=”textdiv”>這是一個測試元素</div> 接著可以利用CSS定義該元素的位置樣式：
#textdiv {
}{
position: absolute;
left: 50px;
top:100px;
} 接著可以通過JavaScript腳本改變textdiv元素的left、top屬性的值，從而使得該div在頁面上隨意移動。
理論上來說，DHTML如此簡單，但是瀏覽器操作元素的方式各異，因此在實際編碼過程中會遇到很多困難。
1.3 瀏覽器的差異性
Netscape公司的 DOM使用了其專有的元素，這些元素稱為層（layer）。這些層都有唯一的ID，JavaScript代碼需要類似這樣使用它們：
document.layers[‘textdiv’];
而在微軟公司的DOM中如此使用：
document.all[‘textdiv’];
如果要獲得該元素的left屬性的值，在Netscape Navigator 4瀏覽器中必須這樣做：
var xpos = document.layers[‘textdiv’].left;
在IE 4中，所用的編碼如下：
var xpos = document. all[‘textdiv’].leftpos;
類似這樣的差異性很多，使開發人員陷入難堪的境地：很多JavaScript代碼需要在檢測到不同的瀏覽器類型后，進行不同的編碼，非常繁瑣。除了在JavaScript實現方面的差異以外，Netscape Navigator和IE瀏覽器對CSS的支持方面也各不相同，有不少程序員把編寫那些同時工作在這兩種瀏覽器環境下的樣式表和腳本視為“黑色藝術”。
1.4 呼喚標準的制定
技術界的絕大多數標準都不是無中生有的，而且當在瀏覽器的制造商們為了壓倒對手而以DOM為武器展開一場營銷大戰的同時，W3C推出了一個標準化的DOM。各大瀏覽器制造商拋棄彼此的敵意，與W3C攜手制定標準，并在新推出的版本中對標準提供了良好的支持。
使用標準的DOM后，可以使用document.getElementById(‘元素ID’)來取代document.layers[‘元素ID’]或document.all[‘元素ID]獲得頁面的某個元素，若要獲得前面的textdiv對象的left屬性的值，可以使用如下 JavaScript語句：
var xpos = document.getElementById(‘textdiv’).left;
通過W3C推出的標準化的DOM，可以讓任何一種程序設計語言對使用任何一種標記語言編寫出來的任何一份文檔進行操控。
2、 元素的選取
2.1 使用getElementById()方法
該方法返回一個與給定id元素值的元素節點相對應的對象，在使用該方法時，請注意大小寫。不過必須注意這個id必須是唯一的，如果定義了多個同樣的id，通過這個方法獲取到的將是第一個被定義的元素。
如下JavaScript代碼將第一個id為textdiv的元素置為不可見，并打印該方法返回的類型：
<html>
<head>
<title>getElementById方法測試</title>
</head>
<body>
<div id="textdiv">測試1</div>
<div id="textdiv">測試2</div>
<script type="text/javascript">
document.getElementById("textdiv").style.display = "none";
alert(typeof document.getElementById("textdiv"));
</script>
</body>
<html>
測試可發現，頁面上只顯示“測試2”的文本，“測試1”的文本被隱藏，彈出窗口提示“object”。
2.2 使用getElementsByTagName()方法
該方法返回一個對象數組，每個對象分別對應著文檔里著給定標簽的一個元素。該方法只有一個參數，它的參數是HTML標簽的名字：
element.getElementsByTagName(tag);
因為該方法返回的是數組對象，所以可以用length屬性得到數組元素的個數。例如如下語句打印名字為li的元素的個數：
alert(document.getElementsByTagName(“li”).length);
getElementsByTagName()方法允許我們把一個通配符當作它的參數，表示文檔中的每個元素都將在這個函數返回數組中占有一席之地。如下代碼打印文檔中有多少個節點：
alert(document. getElementsByTagName(“*”).length);
如下代碼測試getElementsByTagName方法的使用：
<html>
<head>
<title>getElementsByTagName測試</title>
</head>
<body>
<ul id="test">
<li>Amigo</li>
<li>阿蜜果</li>
<li>謝星星</li>
</ul>
<script type="text/javascript">
alert(typeof document.getElementsByTagName("li"));
var items = document.getElementsByTagName("li");
alert(items.length);
for (var i = 0; i < items.length; i++) {
alert(items[i].firstChild.nodeValue);
}
</script>
</body>
<html>
多次彈出的窗口的值如下：
3、 參考文檔
（1）《DOM_百度百科》：
http://baike.baidu.com/view/14806.htm
（2）《dhtml_百度百科》
http://baike.baidu.com/view/8389.htm
（3）《JavaScript DOM編程藝術》 [英] Jeremy Keith 著，楊濤、王曉云等譯，人民郵電出版社出版
posted on 2011-10-31 13:51
阿蜜果 閱讀(2502)
評論(5) 編輯 收藏 所屬分類:
Javascript