29.2 顯示和修改文字內(nèi)容（DHTML）
本節(jié)實例給出一種使用DHTML對象模型方法顯示和修改文字內(nèi)容的實現(xiàn)方法。當用戶單擊“顯示”按鈕時，可以顯示相應文字的內(nèi)容，當用戶單擊“改變”按鈕時，可以改變相應文字的內(nèi)容。
技術(shù)要點
本節(jié)代碼主要使用了DHTML對象模型方法顯示和修改文字內(nèi)容的實現(xiàn)方法和innerHTML屬性，其主要功能和用法如下。
DHTML對象模型方法為JavaScript提供了得到網(wǎng)頁對象的另外方法，使用時可以不必具體了解文檔對象模型的結(jié)構(gòu)層次，而直接得到網(wǎng)頁中的所需元素對象。這樣，JavaScript就可以方便地改變網(wǎng)頁內(nèi)容及網(wǎng)頁的表現(xiàn)方式。
該對象模型方法具有如下特點。在HTML中，網(wǎng)頁中的每一對標記就是一個元素對象，例如，<p></p>、<div></div>、<table></table>等。為得到網(wǎng)頁中的對象，可先將每一個標記賦值為一個惟一的id，例如，<p id="block1"></p>、<div id="titleBar"></div>等。
通過對對象id的引用，就可以使用“document.getElementById（元素標識）”方法得到所需的方法。
innerHTML屬性允許對HTML元素內(nèi)容的簡單讀取和修改。在IE中，還支持innerText、outerText、outerHTML屬性。
innerText與innerHTML類似，只是用innerText設置的內(nèi)容都被作為純文本來處理。因此，不會生成相應的HTML元素。outerText與outerHTML屬性，分別和相對的Inner屬性相似，只是這兩個屬性還對元素本身進行修改。
實現(xiàn)代碼
<!------------------------------文件名：29.2.htm------------------------------>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHTML對象模型方法</title>
<script language="JavaScript">
<!--
function display() //函數(shù)：顯示內(nèi)容
{
var title = document.getElementById('titleBar').innerHTML;
alert(title);
}
function change() //函數(shù)：修改內(nèi)容
{
document.getElementById('titleBar').innerHTML =
'這是<span style="border:1px solid">改變后</span>的文本';
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<h2>顯示和修改網(wǎng)頁中文字的內(nèi)容</h2><hr>
<h1 id="titleBar">這是一行測試文本</h1><hr>
<div style="margin-top:10px;">
<!--分別通過onclick調(diào)用display()函數(shù)和change()函數(shù)，用以顯示內(nèi)容和修改內(nèi)容-->
<input type="button" value="顯示" onclick="display();">
<input type="button" value="改變" onclick="change()">
</div>
</body>
</html>
運行該程序后的顯示結(jié)果如圖29.3所示。單擊頁面上的“顯示”按鈕，會彈出如圖29.4所示的對話框。單擊頁面上的“修改”按鈕，頁面內(nèi)容會改變，如圖29.5所示。此時，再次單擊頁面上的“顯示”按鈕，會彈出29.6所示的對話框。
圖29.3 代碼29.2.htm顯示結(jié)果
圖29.4 彈出的對話框
圖29.5 改變后的顯示結(jié)果
圖29.6 改變后彈出的對話框
源程序解讀
（1）程序定義了一個名為titleBar的單行文本，一個“顯示”按鈕和一個“改變”按鈕，用于對單行文本進行相應的處理。
（2）“顯示”按鈕的onclick事件關(guān)聯(lián)函數(shù)display( )，函數(shù)中，首先使用“document. getElementById('titleBar').innerHTML”將單行文本的內(nèi)容取出，并存儲在變量title中，隨后，使用alert(title)將其顯示出來。
（3）“改變”按鈕的onclick事件關(guān)聯(lián)函數(shù)change( )，函數(shù)中，通過對“document. getElementById('titleBar').innerHTML”重新賦值，從而改變單行文本的內(nèi)容。
