document.all與WEB標(biāo)準(zhǔn)

2019-11-21 02:27:20

字體：大中小

供稿：網(wǎng)友

1、DOM

　　WEB標(biāo)準(zhǔn)現(xiàn)在可真是熱門中熱門，不過下面討論的是一個不符合標(biāo)準(zhǔn)的document.all[]。DOM－－DOCUMENT　OBJECT　MODEL文檔對象模型，提供了訪問文檔對象的方法.例如文檔中有一個table,你要改變它的背景顏色，那就可以在javascript中用document.all[]訪問這個TABLE。但DOM也有所不同，因為瀏覽器廠商之間的競爭，各瀏覽器廠商都開發(fā)了自己的私有DOM，只能在自己的瀏覽器上正確運(yùn)行，document.all[]就是只能運(yùn)行在 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[]是文檔中所有標(biāo)簽組成的一個數(shù)組變量，包括了文檔對象中所有元素（見例1）。

　　IE's document.all collection exposes all document elements.This array provides access to every element in the document.

　　document.all[]這個數(shù)組可以訪問文檔中所有元素。

　　例1（這個可以讓你理解文檔中哪些是對象）

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　例2（訪問一個特定元素）

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　上面的這個例子讓你了解怎么訪問文檔中的一個特定元素，比如文檔中有一個DIV
<div id="docid" name="docname"></div>，你可以通過這個DIV的ID，NAME或INDEX屬性訪問這個DIV：

復(fù)制代碼代碼如下:

document.all["docid"]  
document.all["docname"]  
document.all.item("docid")  
document.all.item("docname")  
document.all[7]  
document.all.tags("div")則返回文檔中所有DIV數(shù)組，本例中只有一個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>    <h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>  <form name="testform" id="testform" action="#" method="get">    <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>  </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　4、標(biāo)準(zhǔn)DOM中的訪問方法

　　開頭就說過document.all[]不符合WEB標(biāo)準(zhǔn)，那用什么來替代它呢？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)站用戶使用其他的瀏覽器，那么你最好避免使用IE的私有屬性。而且IE6也開始支持W3C　DOM。

　　畢竟大多數(shù)人還不了解標(biāo)準(zhǔn)，在使用標(biāo)準(zhǔn)前，你還可以在你的網(wǎng)頁中用document.all[]訪問文檔對象前面寫到WEB標(biāo)準(zhǔn)，今天繼續(xù)WEB標(biāo)準(zhǔn)下可以通過getElementById(), getElementsByName(), and getElementsByTagName()訪問DOCUMENT中的任一個標(biāo)簽：

　　1、getElementById()

　　getElementById()可以訪問DOCUMENT中的某一特定元素，顧名思義，就是通過ID來取得元素，所以只能訪問設(shè)置了ID的元素。

　　比如說有一個DIV的ID為docid：

<div id="docid"></div>

　　那么就可以用getElementById("docid")來獲得這個元素。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　2、getElementsByName()

　　這個是通過NAME來獲得元素，但不知大家注意沒有，這個是GET　ELEMENTS，復(fù)數(shù)ELEMENTS代表獲得的不是一個元素，為什么呢？

　　因為DOCUMENT中每一個元素的ID是唯一的，但NAME卻可以重復(fù)。打個比喻就像人的身份證號是唯一的（理論上，雖然現(xiàn)實中有重復(fù)），但名字重復(fù)的卻很多。如果一個文檔中有兩個以上的標(biāo)簽NAME相同，那么getElementsByName()就可以取得這些元素組成一個數(shù)組。

　　比如有兩個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的回復(fù)，但是很可惜，IE沒有支持這個方法，大家有興趣可以在FIREFOX或NETSCAPE中調(diào)試下面這個例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中調(diào)試成功。）

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　看來最新版瀏覽器理解WEB標(biāo)準(zhǔn)還是有問題，我知道的只有盒模型、空格BUG、漂浮BUG、FLASH插入BUG，從document.getElementsByName可以看出FIREFOX，NETSCAPE理解標(biāo)準(zhǔn)有偏差，但forfor說的對：要靈活應(yīng)用標(biāo)準(zhǔn)。

　　3、getElementsByTagName()

　　這個呢就是通過TAGNAME（標(biāo)簽名稱）來獲得元素，一個DOCUMENT中當(dāng)然會有相同的標(biāo)簽，所以這個方法也是取得一個數(shù)組。

　　下面這個例子有兩個DIV，可以用getElementsByTagName("div")來訪問它們，用getElementsByTagName("div")[0]訪問第一個DIV，用

getElementsByTagName("div")[1]訪問第二個DIV。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　總結(jié)一下標(biāo)準(zhǔn)DOM，訪問某一特定元素盡量用標(biāo)準(zhǔn)的getElementById()，訪問標(biāo)簽用標(biāo)準(zhǔn)的getElementByTagName(),但I(xiàn)E不支持getElementsByName()，所以就要避免使用getElementsByName()，但getElementsByName()和不符合標(biāo)準(zhǔn)的document.all[]也不是全無是處，它們有自己的方便之處，用不用那就看網(wǎng)站的用戶使用什么瀏覽器，由你自己決定了。

　　關(guān)于document.getElementsByName

　　IE當(dāng)然支持可以說IE更忠于html/xhtml標(biāo)準(zhǔn)(嘿嘿原來firefox也不咋地幸災(zāi)樂禍一下^_^)

　　按照O'REILLY的<<HTML與XHTML權(quán)威指南>>中的說法 name并不是核心屬性并非所有標(biāo)簽都可以加name屬性(大家可以拿我下面的例子去 validator.w3.org 做驗證)

　　所以你給div加name屬性理論上是不會出結(jié)果的.這一點(diǎn)IE很好的符合了標(biāo)準(zhǔn)~!!

　　(同時也看出了符合標(biāo)準(zhǔn)也有煩人的地方~_~ 所以大家不用太把標(biāo)準(zhǔn)當(dāng)回事兒過兩年都用xml了這個也過時了!倡導(dǎo)靈活的webstandard應(yīng)用思想除了符合xml思想的東西其他的按瀏覽器的理解去做就行)

附:

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

　　簡單來說就是DIV不支持NAME屬性，所以那個document.getElementsByName的例子調(diào)試不能通過.
下面用INPUT做個例子

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：表單內(nèi)同名元素的控制

下一篇：云網(wǎng)廣告中的代碼，提示出錯，大家找找