JavaScript入門篇之文件物件模型，javascript入門篇
前言：
文件物件模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴充置標語言的標準編程介面。它是一種與平台和語言無關的應用程式介面(API),它可以動態地訪問程式和指令碼,更新其內容、結構和www文檔的風格(目前,HTMl和XML文檔是通過說明部分定義的)。
文件物件模型提供了一種訪問和修改HTML文檔內容的方法。DOM是全球資訊網聯盟（W3C）定義的一種標準。大部分的互連網瀏覽器以各種形式實現了DOM並且獲得了不同程度的成功。和其他標準，特別是那些與web編程相關的標準一樣，DOM已經發展了很多年。它有三個規範，即所謂的DOM的層級，第四個規範正在制定中。DOM的強大遠飛我一兩句可以談清楚的。本文簡單的介紹了一下如何使用Javascript訪問和操作DOM。
一、擷取元素
使用Javascript編程時，擷取文檔的元素是使用DOM的基本方式。下面將介紹其中兩個用來擷取元素的基本方法：getElementById()和getElementsByTagName()。
1、通過ID擷取元素
getElementById()方法是DOM中頻繁使用的一個方法。它擷取HTML文檔的一個特定元素並且返回一個對它的引用。為了擷取元素，它必須具有一個ID屬性。
舉例如下：
<div id="div1"> <p id="p1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> </div> window.onload = function () { var str = document.getElementById("p1").innerHTML; alert(str); //彈出 我是第一個P }
當只擷取一個或幾個元素時，getElementById（）方法工作的很好，但是當我需要同時擷取超過一個的元素時，就發現getElementsByTagName()方法更合適。後者是通過數組或者列表的格式返回指定標籤類型的所有元素。
舉例如下：
<div id="div1"> <p id="p1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> </div> window.onload = function () { var str = document.getElementsByTagName("p")[1].innerHTML; alert(str); //輸出 我是第二個P，因為擷取的是索引為1的P，索引從0開始 } window.onload = function () { var arr = document.getElementsByTagName("p"); for (var i = 0; i < arr.length; i++) { alert(arr[i].innerHTML); } } window.onload = function () { var node = document.getElementById("div1"); var node1 = document.getElementsByTagName("p")[1]; //從擷取到的元素再擷取 alert(node1.innerHTML); }
二、操作屬性1、getAttribute()與setAttribute()
getAttribute()是讀取屬性內容，setAttribute()方法對文檔做出的修改，將使得文檔在瀏覽器視窗裡的顯示效果和/或行為動作發生相應的變化，但我們在通過瀏覽器的view source（查看原始碼）選項去查看文檔的原始碼時看到的仍將是原來的屬性值——也就是說，setAttribute()方法做出的修改不會反映在文檔本身的原始碼裡。這種“表裡不一”的現象源自DOM的工作模式：先載入文檔的靜態內容、再以動態方式對它們進行重新整理，動態重新整理不影響文檔的靜態內容。這正是DOM的真正威力和誘人之處：對頁面內容的重新整理不需要終端使用者在他們的瀏覽器裡執行頁面重新整理操作就可以實現。
2、舉例
<head> <title>Untitled Document</title> <script language="JavaScript"> function change() { var input = document.getElementById("li1"); alert(input.getAttribute("title")); input.setAttribute("title", "mgc"); alert(input.getAttribute("title")); } </script> </head> <body> <ul id="u"> <li id="li1" title="hello">Magci</li> <li>J2EE</li> <li>Haha!</li> </ul> <input type="button" value="Change" onClick="change();" /> </body>
三、建立、刪除、替代、插入節點對象
我們沒有受到與已有元素互動的限制。我們可以使用DOM為文檔添加元素。下面介紹了幾種常用的操作Node對象的方法。
1、建立
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var textNode = document.createTextNode("<p>我是一個javascript建立的節點</p>"); document.getElementById("div1").appendChild(textNode); }
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); div1.removeChild(document.getElementById("p2")); }
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); var span1 = document.createElement("span"); span1.textContent = "我是一個建立的span"; div1.replaceChild(span1,document.getElementById("p2")); }
4、插入
<div id="div1"> <p id="p1">我是第一個P</p> </div> window.onload = function () { var pNode1 = document.createElement("p"); pNode1.textContent = "insertBefore插入的節點"; var pNode2 = document.createElement("p"); pNode2.textContent = "appendChild插入的節點"; document.getElementById("div1").appendChild(pNode2); document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1")); }
結合前面一個階段學過的XML，XML文檔就是一顆節點樹，樹上所有的節點都是有聯絡的。Javascript就是通過DOM來操作XML中的節點。解譯器把XML翻譯成Javascript可訪問的DOM對象，這樣就方便了使用Javascript語言來操作XML文檔。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
