深入淺出JavaScript （四）DHTML

昵稱10504424 2013-02-20

展開全文

DHTML對象模型是將瀏覽器和HTML文件的標(biāo)簽都對象化,以便Javascript程序代碼可以輕易地操控瀏覽器和訪問HTML標(biāo)簽的對象.

DHTML并沒有建立全新的HTML標(biāo)簽集和樣式之間的關(guān)系,Script程序代碼可以控制文件的元素,樣式可以建立文件元素的編排,Script程序代碼可以訪問樣式或初始化樣式.

訪問HTML文件的所有元素,將每一個HTML標(biāo)簽視為一個對象,使用屬性id或name來訪問標(biāo)簽對象。一下是DHTML模型。

下面介紹幾個常用對象的常用方法或者屬性。

【W(wǎng)indow對象】

1. setTimeout(express,time)

啟動定時器，當(dāng)Time的時間到達(dá)時，運行express表達(dá)式，單位為千分之一毫秒

clearTimeout()

停止setTimeout方法啟動的定時器，看下面例子：

經(jīng)過1秒后，執(zhí)行Count()函數(shù)，然后，停止。

[javascript] view plaincopyprint?

<SPAN style="FONT-SIZE: 18px"><script language="javascript" type="text/javascript" >
//計時
function Count()
{
alert("執(zhí)行alert");
}
//保存setTimeout()函數(shù)返回ID
var timeoutId;
function GameBegin()
{
//經(jīng)過1秒后，調(diào)用Count()函數(shù)
timeoutId=setTimeout("Count()",1000);
}
function GameEnd()
{
//結(jié)束調(diào)用
clearTimeout(timeoutId);
}
</script></SPAN>

<script language="javascript" type="text/javascript" >
//計時
function Count()
{
alert("執(zhí)行alert");
}
//保存setTimeout()函數(shù)返回ID
var timeoutId;
function GameBegin()
{
//經(jīng)過1秒后，調(diào)用Count()函數(shù)
timeoutId=setTimeout("Count()",1000);
}
function GameEnd()
{
//結(jié)束調(diào)用
clearTimeout(timeoutId);
}
</script>

2.內(nèi)置對話框

alert(message)

顯示一個警告信息的窗口，參數(shù)就是顯示的信息內(nèi)容

confirm(message)

一個確認(rèn)的對話框，參數(shù)為信息內(nèi)容，傳回true表示單擊“確定”按鈕，false為“取笑”按鈕

Prompt(msg,value)

顯示輸入文字內(nèi)容的對話框，參數(shù)msg為信息內(nèi)容，value為默認(rèn)值，傳回用戶輸入的字符串串

[javascript] view plaincopyprint?

<SPAN style="FONT-SIZE: 18px"><script language="javascript" type="text/javascript" >
alert("李龍生");
confirm("你確定登陸嗎？");
prompt("請輸入用戶名！","李龍生");
</script></SPAN>

<script language="javascript" type="text/javascript" >
alert("李龍生");
confirm("你確定登陸嗎？");
prompt("請輸入用戶名！","李龍生");
</script>

【Navigator對象】

Navigtor對象是Window對象的下一層對象，通過該對象的屬性可以獲取瀏覽器和系統(tǒng)資源的信息，這些屬性都是只讀屬性。

【Document對象】

即是瀏覽器顯示的HTML文件，對文件的理解。

1.文件是一種應(yīng)用程序

當(dāng)HTML支持JavaScript后，文件從靜態(tài)變?yōu)榱藙討B(tài)應(yīng)用程序

2.文件是一種用戶接口

文件可以響應(yīng)用戶操作，它也是一種用戶接口

3.文件是一種數(shù)據(jù)來源

XML能夠定義，給予文件全新的意義，使文件不再只是文件，XML可以使文件成為一種數(shù)據(jù)來源

4.getElementById()

getElementByName()

可以依據(jù)HTML標(biāo)簽的id或者name屬性獲取指定的HTML元素,看下面實例：

[html] view plaincopyprint?

<SPAN style="FONT-SIZE: 18px"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>獲取文件指定元素</title>
<script language="javascript" type="text/javascript" >
//使用ID獲取元素
function getElement()
{
var element=document.getElementById("header");
alert("標(biāo)簽名稱："+element.tagName);
}
//使用Name獲取元素
function getElementName()
{
var element=document.getElementsByName("buttonlist");
alert("共有元素"+element.length);
}
</script>
</head>
<body >
<h2 id="header">獲取文件指定元素</h2>
<hr/>
<form>
<input type="button" value="獲取標(biāo)題標(biāo)簽" onclick="javascript:getElement();" />
<input name="buttonlist" type="button" value="按鈕1" onclick="javascript:getElementName();" />
<input name="buttonlist" type="button" value="按鈕2" onclick="javascript:getElementName();" />
</form>
</body>
</html></SPAN>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>獲取文件指定元素</title>
<script language="javascript" type="text/javascript" >
//使用ID獲取元素
function getElement()
{
var element=document.getElementById("header");
alert("標(biāo)簽名稱："+element.tagName);
}
//使用Name獲取元素
function getElementName()
{
var element=document.getElementsByName("buttonlist");
alert("共有元素"+element.length);
}
</script>
</head>
<body >
<h2 id="header">獲取文件指定元素</h2>
<hr/>
<form>
<input type="button" value="獲取標(biāo)題標(biāo)簽" onclick="javascript:getElement();" />
<input name="buttonlist" type="button" value="按鈕1" onclick="javascript:getElementName();" />
<input name="buttonlist" type="button" value="按鈕2" onclick="javascript:getElementName();" />
</form>
</body>
</html>

運行效果如下：

【 DHTML與DOM區(qū)別】

DHTML 是 Dynamic HTML（動態(tài) HTML）的縮寫，是 HTML、CSS、Javascript 這三種技術(shù)的結(jié)合。

DOM 是 Document Object Model（文檔對象模型）的縮寫，是一種應(yīng)用編程接口。

DHTML 出現(xiàn)得較早。
DOM 是在 DHTML 之后出現(xiàn)的。
DHTML 沒有統(tǒng)一的標(biāo)準(zhǔn)，各瀏覽器有各自的 DHTML。
DOM 已經(jīng)得到 W3C 的承認(rèn)，并有新的標(biāo)準(zhǔn)，DOM 版本越往后，各瀏覽器對 DOM 的支持越相近。也即 DOM 比 DHTML 更規(guī)范。
DHTML 只適用于 Web 文檔。
DOM 則涵蓋了使用任何一種支持 DOM API 的程序設(shè)計語言去處理任何一種標(biāo)記文檔的所有情況，比如：ASP 處理 XML 文檔，JavaScript 處理 Web 文檔。也即 DOM 比 DHTML 功能強(qiáng)大。