動態更改網頁HTML元素(對象)內容_經驗交流

動態HTML的出現為使用者提供了一種基於傳統標準HTML來建立互動式頁面的機制。本文主要針對IE 5.0談談如何通過其提供的HTML文檔對象(DOM)模型使用指令碼添加、刪除、修改頁面中的HTML元素(對象)及元素(對象)內容。

　　動態更改網頁HTML元素(對象)內容

　　HTML區塊層級元素(對象)提供的4個可讀寫屬性innerHTML、innerText、 outerHTML、outerText來更改元素(對象)內容(如表1所示)。

　　當設定innerHTML 屬性時，給定字串完全替換現有的元素(對象)內容，如果給定字串中含有HTML格式標籤，那麼該字串就會進行解析並格式化。當用innerText屬性設定時，給定字串也完全替換現有元素(對象)常值內容，但與innerHTML不同的是HTML格式標籤是當做文本直接顯示在頁面中。若用outerHTML和outerTexe屬性設定時，則完全替換元素(對象)。具體操作樣本請參見PC World China網站的相關內容。

　　修改網頁HTML元素

　　IE 5.0中文件物件模型(DOM)提供的修改元素(節點)的方法如表2所示。

　　在網頁中添加新元素分為2個步驟，先建立新元素(對象)，然後再將新建立的元素(對象)插入到網頁中。在插入到網頁之前，允許對該元素(對象)有關屬性進行設定，但不能通過元素(對象)ID來引用。也可以使用document.createElement建立新元素，該方法所帶參數為用於元素的合法HTML格式標籤字串(包含元素屬性)。此外還可以通過元素(對象)cloneNode方法複製該元素(對象)的途徑來建立新元素。將新元素插入文檔可以通過使用元素(對象)appendChild或insertBefore方法來實現，前者是在元素(對象)子項目集合末尾插入新元素，後者是在元素(對象)子項目集合中某個子項目前插入新元素。

　　替換、刪除元素(對象)需要注意: ①在replaceChild、removeChild中指定的參數必須為該元素(對象)的直接子項目(對象); ②在使用replaceNode替換元素(對象)時，所有與該元素(對象)相關的屬性和內容也將被替換;③如果removeNode中指定參數為true，則該元素包含的所有子項目(節點)也將被刪除，預設false,即不刪除子項目(節點)。具體操作樣本請參見PC World China網站的相關內容。

　　插入網頁新元素(對象)、HTML或常值內容 此外，也可用insertAdjacenElement、insertAdjacentHTML和insertAdjacentText等方法分別在元素(對象)的指定位置插入新元素(對象)、Html或常值內容(如表3所示)。

　　元素(對象)、HTML或常值內容插入的位置由參數指定。BeforeBegin指定插入在元素(對象)之前; afterBegin指定插入在元素(對象)的所有內容之前; beforeEnd指定插入在元素(對象)的所有內容之後; afterEnd指定插入在元素(對象)之後。具體操作樣本請參見PC World China網站的相關內容。

　　網頁動態更改綜合運用 我們以菜單程式為例示範網頁元素及元素內容修改的應用。該程式靈活運用了元素建立、追加、刪除等方法及innerHTML 屬性建立菜單及子功能表(該程式利用了XML技術讀取菜單資料，有關XML技術請參考相關手冊)，該程式略加修改即可成為一個功能非常強大的實用菜單程式。綜合運用樣本原始碼如下。

---- < html >< head >
---- < title >綜合運用樣本< /title >
---- < script > var activeMenu,menuContainer=null;
---- function menusetup(){
---- var parentMenuItems=MENUXML.selectNodes("//Menulist/menu");
---- var xmlElement=parentMenuItems.nextNode();
---- while (xmlElement!=null){
---- var newElement=document.createElement("span");
---- newElement.innerText =xmlElement.getAttribute("display");
---- newElement.id=xmlElement.getAttribute("value")
---- newElement.type="parentMenu"
---- newElement.style.width=100;
---- newElement.style.backgroundColor="#CCCCCC";
---- menubar.appendChild(newElement);
---- xmlElement = parentMenuItems.nextNode(); }}
---- function menuClick(){
---- EventSource=event.srcElement
---- switch(EventSource.type){
---- case "parentMenu":
---- removeSubMenu();
---- buildSubMenu(EventSource.id);
---- EventSource.setCapture();
---- activeMenu=EventSource;
---- break;
---- default:
---- activeMenu.releaseCapture();
---- removeSubMenu();
---- activeMenu=null;
---- break;} }
---- function buildSubMenu(EventSourceid){
---- menuContainer=document.createElement("div");
---- menuContainer.style.backgroundColor="#DD00DD";
---- menuContainer.style.width=100;
---- eval(EventSourceid).appendChild(menuContainer);
---- var subMenuItems=MENUXML.selectNodes("//menu[@value='"+EventSourceid+"']/Item");
---- var xmlElement=subMenuItems.nextNode();
---- while (xmlElement!=null){
---- var newElement=document.createElement("div");
---- newElement.innerHTML=xmlElement.getAttribute("display");
---- menuContainer.appendChild(newElement);
---- xmlElement=subMenuItems.nextNode(); }}
---- function removeSubMenu(){
---- if(menuContainer!=null)menuContainer.removeNode(true);}
---- < /script >
---- < /head >< body onload=menusetup() >
---- < xml id=MENUXML >< Menulist >
---- < menu display="File" value="File" >
---- < Item display="New" value="New"/ >
---- < Item display="Open" value="Open" / >
---- < Item display="Save" value="Save" / >
---- < /menu >
---- < /Menulist >< /xml >
---- < div id=menubar onclick=menuClick() >< /div >
---- < /body >< /html >
站長用javascript直接產生元素的代碼

-----------start----------------------------

ABCDE

-----------------end------------------

　　關於動態HTML

　　又稱DHTML，是近年來網路發展進程中最令人激動的創新之一，它提供了一種在網頁下載後仍可以通過用戶端瀏覽器來隨時更換內容或外觀的能力。它不是一項專門技術，而是通過各種技術的綜合發展得以實現的概念，這些技術包括DOM(文件物件模型)、Jscript、CSS等。DHTML的核心是DOM模型，正是它使得傳統HTML語言所編寫的網頁具備了動態特性。注意: 不同瀏覽器所支援的DOM模型是不完全相同的。

