天天看點

document.all與WEB标準

1、DOM

  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>

<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>

<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>

<body><div id="docid" name="docname" onClick="bgcolor()"></div>

<script language="javascript" type="text/javascript">

function bgcolor(){

document.all[7].style.backgroundColor="#000"

  上面的這個例子讓你了解怎麼通路文檔中的一個特定元素,比如文檔中有一個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

<title>Document.All Example #2</title>

<!-- 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';" />

<input type="button" value="Align Center"

onclick="document.all['heading1'].align='center';" />

<input type="button" value="Align Right"

onclick="document.all['heading1'].align='right';" />

<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';" />

<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';" />

<input type="text" name="userText" id="userText" size="30" />

<input type="button" value="Change Text"

onclick="document.all['heading1'].innerText=document.testform.userText.value;" />

</form>

  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")來獲得這個元素。

<title>ById</title>

document.getElementById("docid").style.backgroundColor="#000"

  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">

<title>Byname,tag</title>

#docid1,#docid2{

margin:10px;

<div name="docname" id="docid1" onClick="bgcolor()"></div>

<div name="docname" id="docid2" onClick="bgcolor()"></div>

var docnObj=document.getElementsByName("docname");

docnObj[0].style.backgroundColor = "black";

docnObj[1].style.backgroundColor = "black";

  看來最新版浏覽器了解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。

var docnObj=document.getElementsByTagName("div");

  總結一下标準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思想的東西 其他的按浏覽器的了解去做就行)

附:

繼續閱讀