document.all与WEB标准
WEB標準現在可真是熱門中熱門，不過下面討論的是一個不符合標準的document.all[]。DOM－－DOCUMENT OBJECT MODEL文檔對象模型，提供了訪問文檔對象的方法.例如文檔中有一個table,你要改變它的背景顏色，那就可以在javascript中用document.all[]訪問這個TABLE。但DOM也有所不同，因為瀏覽器廠商之間的競爭，各瀏覽器廠商都開發了自己的私有DOM，只能在自己的瀏覽器上正確運行，document.all[]就是只能運行在?IE是的微軟的私有DOM。為了正確理解DOM，給出IE4的DOM
2、理解document.all[]
從IE4開始IE的object?model才增加了document.all[],來看看document.all[]的Description:
Array?of?all?HTML?tags?in?the?document.Collection?of?all?elements?contained?by?the?object.
也就是說document.all[]是文檔中所有標簽組成的一個數組變量，包括了文檔對象中所有元素（見例1）。
IE’s?document.all?collection?exposes?all?document?elements.This?array?provides?access?to?every?element?in?the?document.
document.all[]這個數組可以訪問文檔中所有元素。
例1（這個可以讓你理解文檔中哪些是對象）
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<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>
例2（訪問一個特定元素）
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
上面的這個例子讓你了解怎么訪問文檔中的一個特定元素，比如文檔中有一個DIV
<div?id="docid"?name="docname"></div>，你可以通過這個DIV的ID，NAME或INDEX屬性訪問這個DIV：
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")則返回文檔中所有DIV數組，本例中只有一個DIV，所以用document.all.tags("div")[0]就可以訪問了。
3、使用document.all[]
例3
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<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"?
οnclick="document.all['heading1'].align='left';"?/>
<input?type="button"?value="Align?Center"
οnclick="document.all['heading1'].align='center';"?/>
<input?type="button"?value="Align?Right"
οnclick="document.all['heading1'].align='right';"?/>
<br?/><br?/>
<input?type="button"?value="Bigger"
οnclick="document.all['heading1'].style.fontSize='xx-large';"?/>
<input?type="button"?value="Smaller"
οnclick="document.all['heading1'].style.fontSize='xx-small';"?/>
<br?/><br?/>
<input?type="button"?value="Red"
οnclick="document.all['heading1'].style.color='red';"?/>
<input?type="button"?value="Blue"
οnclick="document.all['heading1'].style.color='blue';"?/>
<input?type="button"?value="Black"
οnclick="document.all['heading1'].style.color='black';"?/>
<br?/><br?/>
<input?type="text"?name="userText"?id="userText"?size="30"?/>
<input?type="button"?value="Change?Text"
οnclick="document.all['heading1'].innerText=document.testform.userText.value;"?/>
</form>
</body>
</html>
4、標準DOM中的訪問方法
開頭就說過document.all[]不符合WEB標準，那用什么來替代它呢？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.
這段話的意思是大多數第三方瀏覽器只支持W3C的DOM，如果你的網站用戶使用其他的瀏覽器，那么你最好避免使用IE的私有屬性。而且IE6也開始支持W3C DOM。
畢竟大多數人還不了解標準，在使用標準前，你還可以在你的網頁中用document.all[]訪問文檔對象前面寫到WEB標準，今天繼續WEB標準下可以通過getElementById(),?getElementsByName(),?and?getElementsByTagName()訪問DOCUMENT中的任一個標簽：
1、getElementById()
getElementById()可以訪問DOCUMENT中的某一特定元素，顧名思義，就是通過ID來取得元素，所以只能訪問設置了ID的元素。
比如說有一個DIV的ID為docid：
<div?id="docid"></div>
那么就可以用getElementById("docid")來獲得這個元素。
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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()
這個是通過NAME來獲得元素，但不知大家注意沒有，這個是GET ELEMENTS，復數ELEMENTS代表獲得的不是一個元素，為什么呢？
因為DOCUMENT中每一個元素的ID是唯一的，但NAME卻可以重復。打個比喻就像人的身份證號是唯一的（理論上，雖然現實中有重復），但名字重復的卻很多。如果一個文檔中有兩個以上的標簽NAME相同，那么getElementsByName()就可以取得這些元素組成一個數組。
比如有兩個DIV：
<div?name="docname"?id="docid1"></div>
<div?name="docname"?id="docid2"></div>
那么可以用getElementsByName("docname")獲得這兩個DIV，用getElementsByName("docname")[0]訪問第一個DIV，用getElementsByName("docname")[1]訪問第二個DIV。
下面這段話有錯，請看forfor的回復，但是很可惜，IE沒有支持這個方法，大家有興趣可以在FIREFOX或NETSCAPE中調試下面這個例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中調試成功。）
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<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>
看來最新版瀏覽器理解WEB標準還是有問題，我知道的只有盒模型、空格BUG、漂浮BUG、FLASH插入BUG，從document.getElementsByName可以看出FIREFOX，NETSCAPE理解標準有偏差，但forfor說的對：要靈活應用標準。
3、getElementsByTagName()
這個呢就是通過TAGNAME（標簽名稱）來獲得元素，一個DOCUMENT中當然會有相同的標簽，所以這個方法也是取得一個數組。
下面這個例子有兩個DIV，可以用getElementsByTagName("div")來訪問它們，用getElementsByTagName("div")[0]訪問第一個DIV，用
getElementsByTagName("div")[1]訪問第二個DIV。
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<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>
總結一下標準DOM，訪問某一特定元素盡量用標準的getElementById()，訪問標簽用標準的getElementByTagName(),但IE不支持getElementsByName()，所以就要避免使用getElementsByName()，但getElementsByName()和不符合標準的document.all[]也不是全無是處，它們有自己的方便之處，用不用那就看網站的用戶使用什么瀏覽器，由你自己決定了。
關于document.getElementsByName
IE當然支持?可以說IE更忠于html/xhtml標準(嘿嘿?原來firefox也不咋地?幸災樂禍一下^_^)
按照O'REILLY的<<HTML與XHTML權威指南>>中的說法?name并不是核心屬性?并非所有標簽都可以加name屬性(大家可以拿我下面的例子去?validator.w3.org?做驗證)
所以你給div加name屬性理論上是不會出結果的.這一點IE很好的符合了標準~!!
(同時也看出了符合標準也有煩人的地方~_~?所以大家不用太把標準當回事兒?過兩年都用xml了?這個也過時了!倡導靈活的webstandard應用思想?除了符合xml思想的東西?其他的按瀏覽器的理解去做就行)
附:
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script?type="text/javascript">
<!--
function?aa(){
var?s="Elements?with?attribute?'name':/n";
var?aaa=document.getElementsByName("a");
for(var?i=0;i<aaa.length;i++)s+="/n"+aaa[i].tagName;
alert(s);
}
-->
</script>
<title>?test?</title>
</head>
<body>
<div?name="a"><span?name="a">1</span>2<input?name="a"?value="3"/><textarea?name="a"?rows="2"?cols="8">4</textarea><button?οnclick="aa()">alert</button></div>
</body>
</html>
簡單來說就是DIV不支持NAME屬性，所以那個document.getElementsByName的例子調試不能通過.
下面用INPUT做個例子
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<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>
<input?name="docname"?οnmοuseοver="bgcolor()"?οnmοuseοut="bgcolor2()"?/>
<input?name="docname"?οnmοuseοver="bgcolor()"?οnmοuseοut="bgcolor2()"?/>
</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";
}
function?bgcolor2(){
var?docnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor?=?"#fff";
docnObj[1].style.backgroundColor?=?"#fff";
}
-->
</script>
總結
以上是生活随笔為你收集整理的document.all与WEB标准的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个关于无所谓的个性签名。
- 下一篇： 用IE重起计算机或者关机