實作Web頁面内容動态改變的dhtml操作

2023-08-05 17:57:02

IE的DHTML對象提供了四個可讀寫的屬性來動态操作頁面元素的内容：innerText, outerText, innerHTML, outerHTML.

需注意兩點：

1. 其中innerText,outerText屬性的值是作為普通文本呈現的，即使它含有HTML标簽也如實反應出來；而innerHTML, outerHTML呈現的是經HTML引擎解析後文本，它可以反應屬性中HTML标簽的表現效果。

2. 對對象的outerText，outerHTML屬性指派（即寫操作）會删除該對象。

以上四個屬性的指派操作隻是替換原對象的文本内容，想要在頁面中指定元素相關位置新增文本内容，需采用insertAdjacentHTML和insertAdjacentText方法。形式如下：

object.insertAdjacentText(sWhere, sText)

object.insertAdjacentHTML(sWhere, sText)

其中 sWhere 表示插入的文本相對于html标簽的位置，有如下四個預設值：

beforeBegin，afterBegin，beforeEnd，afterEnd

使用中需注意如下幾點：

1．這兩種方法必須在整個文檔裝載完成之後才能使用，否則将出錯。

2． InsertAdjacentText隻能插入普通文本，InsertAdjacentHTML插入html格式的文本

3．用InsertAdjacentHTML插入腳本，必須在script元素中使用defer屬性，否則腳本執行将出現運作期錯誤

4．InsertAdjacentHTML插入html元素後，all以及其他可能的元素集合将自動更新以反應動态變化。如頁面後續元素的sourceIndex 屬性将改變。

5．當賦予InsertHTML/outerHTML屬性無效的HTML标簽，該方法可能出現運作時錯。如以下代碼将出錯：

<BODY>

pdiv.innerHTML = "<p>hello</p>"

</SCRIPT>

</BODY>

此外頁面内容動态操作還需要注意如下一些細節：

1．隻有文檔BODY内顯示的内容能被以上屬性和方法動态改變，BODY對象的内容能被動态操作，但BODY對象本身無法被替換。

2．以上屬性和方式不能操作空标簽(沒有内容的html标簽)，如input,img。

3．對于table對象而言，隻有td（innerHTML/innerText）和table（outerHMTL/outerText）對象可以用某些屬性來替換或插入内容；而其他table對象，如tr、tbody不能用這些屬性來改變内容。

繼續閱讀