document.all 的詳細(xì)解釋?zhuān)ㄞD(zhuǎn))
Posted on 2007-08-03 17:35 love1563 閱讀(209) 評(píng)論(0) 編輯 收藏從IE4開(kāi)始IE的object model才增加了document.all[],來(lái)看看document.all[]的Description:
Array of all HTML tags in the document.Collection of all elements contained by the object.
也就是說(shuō)document.all[]是文檔中所有標(biāo)簽組成的一個(gè)數(shù)組變量,包括了文檔對(duì)象中所有元素(見(jiàn)例1)。
IE’s document.all collection exposes all document elements.This array provides access to every element in the document.
document.all[]這個(gè)數(shù)組可以訪問(wèn)文檔中所有元素。
例1(這個(gè)可以讓你理解文檔中哪些是對(duì)象)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<title>Document.All Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
<script type="text/javascript">
<!--
var i,origLength;
origLength = document.all.length;
document.write('document.all.length='+origLength+"<br />");
for (i = 0; i < origLength; i++)
{
document.write("document.all["+i+"]="+document.all[i].tagName+"<br />");
}
//-->
</script>
</body>
</html>
它的執(zhí)行結(jié)果是:
Example Heading
--------------------------------------------------------------------------------
This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.
--------------------------------------------------------------------------------
document.all.length=18
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
document.all[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all[14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(注意它只可以在IE上運(yùn)行)
例2(訪問(wèn)一個(gè)特定元素)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>單擊DIV變色</title>
<style type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</script>
上面的這個(gè)例子讓你了解怎么訪問(wèn)文檔中的一個(gè)特定元素,比如文檔中有一個(gè)DIV
<div id="docid" name="docname"></div>,你可以通過(guò)這個(gè)DIV的ID,NAME或INDEX屬性訪問(wèn)這個(gè)DIV:
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")則返回文檔中所有DIV數(shù)組,本例中只有一個(gè)DIV,所以用document.all.tags("div")[0]就可以訪問(wèn)了。
3、使用document.all[]
例3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<title>Document.All Example #2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- Works in Internet Explorer and compatible -->
<h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>
<form name="testform" id="testform" action="#" method="get">
<br /><br />
<input type="button" value="Align Left"
onclick="document.all['heading1'].align='left';" />//改變<h1></h1>標(biāo)簽對(duì)中的align屬性的值,下面的代碼作用相同
<input type="button" value="Align Center"
onclick="document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
onclick="document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
onclick="document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
onclick="document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
onclick="document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
onclick="document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
onclick="document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
onclick="document.all['heading1'].innerText=document.testform.userText.value;" />//改變<h1></h1>標(biāo)簽對(duì)中的文本內(nèi)容
</form>
</body>
</html>
4、標(biāo)準(zhǔn)DOM中的訪問(wèn)方法
開(kāi)頭就說(shuō)過(guò)document.all[]不符合WEB標(biāo)準(zhǔn),那用什么來(lái)替代它呢?document.getElementById
Most third-party browsers are “strict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.
這段話的意思是大多數(shù)第三方瀏覽器只支持W3C的DOM,如果你的網(wǎng)站用戶(hù)使用其他的瀏覽器,那么你最好避免使用IE的私有屬性。而且IE6也開(kāi)始支持W3C DOM。
畢竟大多數(shù)人還不了解標(biāo)準(zhǔn),在使用標(biāo)準(zhǔn)前,你還可以在你的網(wǎng)頁(yè)中用document.all[]訪問(wèn)文檔對(duì)象前面寫(xiě)到WEB標(biāo)準(zhǔn),今天繼續(xù)WEB標(biāo)準(zhǔn)下 可以通過(guò)getElementById(), getElementsByName(), and getElementsByTagName()訪問(wèn)DOCUMENT中的任一個(gè)標(biāo)簽:
1、getElementById()
getElementById()可以訪問(wèn)DOCUMENT中的某一特定元素,顧名思義,就是通過(guò)ID來(lái)取得元素,所以只能訪問(wèn)設(shè)置了ID的元素。
比如說(shuō)有一個(gè)DIV的ID為docid:
<div id="docid"></div>
那么就可以用getElementById("docid")來(lái)獲得這個(gè)元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ById</title>
<style type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
document.getElementById("docid").style.backgroundColor="#000"
}
-->
</script>
2、getElementsByName()
這個(gè)是通過(guò)NAME來(lái)獲得元素,但不知大家注意沒(méi)有,這個(gè)是GET ELEMENTS,復(fù)數(shù)ELEMENTS代表獲得的不是一個(gè)元素,為什么呢?
因?yàn)镈OCUMENT中每一個(gè)元素的ID是唯一的,但NAME卻可以重復(fù)。打個(gè)比喻就像人的身份證號(hào)是唯一的(理論上,雖然現(xiàn)實(shí)中有重復(fù)),但 名字重復(fù)的卻很多。如果一個(gè)文檔中有兩個(gè)以上的標(biāo)簽NAME相同,那么getElementsByName()就可以取得這些元素組成一個(gè)數(shù)組。
比如有兩個(gè)DIV:
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")獲得這兩個(gè)DIV,用getElementsByName("docname")[0]訪問(wèn)第一個(gè)DIV,用getElementsByName("docname")[1]訪問(wèn)第二個(gè)DIV。
下面這段話有錯(cuò),請(qǐng)看forfor的回復(fù),但是很可惜,IE沒(méi)有支持這個(gè)方法,大家有興趣可以在FIREFOX或NETSCAPE中調(diào)試下面這個(gè)例子。(我在NETSCAPE7.2英文版和FIREFOX1.0中調(diào)試成功。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
var docnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor = "black";
docnObj[1].style.backgroundColor = "black";
}
-->
</script>
3、getElementsByTagName()
這個(gè)呢就是通過(guò)TAGNAME(標(biāo)簽名稱(chēng))來(lái)獲得元素,一個(gè)DOCUMENT中當(dāng)然會(huì)有相同的標(biāo)簽,所以這個(gè)方法也是取得一個(gè)數(shù)組。
下面這個(gè)例子有兩個(gè)DIV,可以用getElementsByTagName("div")來(lái)訪問(wèn)它們,用getElementsByTagName("div")[0]訪問(wèn)第一個(gè)DIV,用
getElementsByTagName("div")[1]訪問(wèn)第二個(gè)DIV。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
var docnObj=document.getElementsByTagName("div");
docnObj[0].style.backgroundColor = "black";
docnObj[1].style.backgroundColor = "black";
}
-->
</script>