javascript裡的document.all用法收集

longwansheng發表於2007-12-04
http://www.zzbang.cn/html/dev/js/2007/11/09/55/[@more@]
javascript裡的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(這個可以讓你理解文件中哪些是物件)
br />"">


Document.All Example



Example Heading




This is a paragraph. It is only a paragraph.


Yet another paragraph.


This final paragraph has special emphasis.







 它的執行結果是:
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上執行)
 例2(訪問一個特定元素)
br />"">



單擊DIV變色






上面的這個例子讓你瞭解怎麼訪問文件中的一個特定元素,比如文件中有一個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
br />"">


Document.All Example #2



<!-- Works in Internet Explorer and compatible --&gt

DHTML Fun!!!






onclick="document.all['heading1'].align='left';" />//改變

標籤對中的align屬性的值,下面的程式碼作用相同
onclick="document.all['heading1'].align='center';" />
onclick="document.all['heading1'].align='right';" />



onclick="document.all['heading1'].style.fontSize='xx-large';" />
onclick="document.all['heading1'].style.fontSize='xx-small';" />



onclick="document.all['heading1'].style.color='red';" />
onclick="document.all['heading1'].style.color='blue';" />
onclick="document.all['heading1'].style.color='black';" />




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

標籤對中的文字內容



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:

  那麼就可以用getElementById("docid")來獲得這個元素。
br />"">



ById






  2、getElementsByName()
  這個是透過NAME來獲得元素,但不知大家注意沒有,這個是GET ELEMENTS,複數ELEMENTS代表獲得的不是一個元素,為什麼呢?
  因為DOCUMENT中每一個元素的ID是唯一的,但NAME卻可以重複。打個比喻就像人的身份證號是唯一的(理論上,雖然現實中有重複),但名字重複的卻很多。如果一個文件中有兩個以上的標籤NAME相同,那麼getElementsByName()就可以取得這些元素組成一個陣列。
  比如有兩個DIV:


  那麼可以用getElementsByName("docname")獲得這兩個DIV,用getElementsByName("docname")[0]訪問第一個DIV,用getElementsByName("docname")[1]訪問第二個DIV。
  下面這段話有錯,請看forfor的回覆,但是很可惜,IE沒有支援這個方法,大家有興趣可以在FIREFOX或NETSCAPE中除錯下面這個例子。(我在NETSCAPE7.2英文版和FIREFOX1.0中除錯成功。)




Byname,tag








 3、getElementsByTagName()
  這個呢就是透過TAGNAME(標籤名稱)來獲得元素,一個DOCUMENT中當然會有相同的標籤,所以這個方法也是取得一個陣列。
  下面這個例子有兩個DIV,可以用getElementsByTagName("div")來訪問它們,用getElementsByTagName("div")[0]訪問第一個DIV,用
getElementsByTagName("div")[1]訪問第二個DIV。




Byname,tag







來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/92289/viewspace-988444/,如需轉載,請註明出處,否則將追究法律責任。

相關文章