DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 理解document.all[]:DOM文檔對象模型
理解document.all[]:DOM文檔對象模型
編輯：CSS進階教程     

網頁制作Webjx文章簡介：淺談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（這個可以讓你理解文檔中哪些是對象）
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head>   
  5. <title>Document.All Example</title>   
  6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   
  7. </head>   
  8. <body>   
  9. <h1>Example Heading</h1>   
  10. <hr />   
  11. <p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>   
  12. <p>Yet another <em>paragraph.</em></p>   
  13. <p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>   
  14. <hr />   
  15. <script type="text/javascript">   
  16. <!--   
  17. var i,origLength;   
  18. origLength = document.all.length;   
  19. document.write('document.all.length='+origLength+"<br/>");   
  20. for (i = 0; i < origLength; i++)   
  21. {   
  22. document.write("document.all["+i+"]="+document.all[i].tagName+"<br/>");   
  23. }   
  24. //-->   
  25. </script>   
  26. </body>   
  27. </html>

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
  2. "http://www.w3.org/TR/html4/loose.dtd">   
  3. <html>   
  4. <head>   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  6. <title>單擊DIV變色</title>   
  7. <style type="text/css">   
  8. <!--   
  9. #docid{   
  10. height:400px;   
  11. width:400px;   
  12. background-color:#999;}   
  13. -->   
  14. </style>   
  15. </head>   
  16. <body><div id="docid" name="docname" onClick="bgcolor()"></div>   
  17. </body>   
  18. </html>   
  19. <script language="javascript" type="text/javascript">   
  20. <!--   
  21. function bgcolor(){   
  22. document.all[7].style.backgroundColor="#000"   
  23. }   
  24. -->   
  25. </script>

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

  1. document.all["docid"]  
  2. document.all["docname"]  
  3. document.all.item("docid")  
  4. document.all.item("docname")  
  5. document.all[7]  
  6. document.all.tags("div")則返回文檔中所有DIV數組，本例中只有一個DIV，所以用document.all.tags("div")[0]就可以訪問了。



3、使用document.all[]

例3 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head>   
  5. <title>Document.All Example #2</title>   
  6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   
  7. </head>   
  8. <body>   
  9. <!-- Works in Internet Explorer and compatible -->   
  10. <h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>   
  11. <form name="testform" id="testform" action="#" method="get">   
  12.  
  13.    
  14. <input type="button" value="Align Left"    
  15. onclick="document.all['heading1'].align='left';" />   
  16. <input type="button" value="Align Center"   
  17. onclick="document.all['heading1'].align='center';" />   
  18. <input type="button" value="Align Right"   
  19. onclick="document.all['heading1'].align='right';" />   
  20.  
  21.    
  22. <input type="button" value="Bigger"   
  23. onclick="document.all['heading1'].style.fontSize='xx-large';" />   
  24. <input type="button" value="Smaller"   
  25. onclick="document.all['heading1'].style.fontSize='xx-small';" />   
  26.  
  27.    
  28. <input type="button" value="Red"   
  29. onclick="document.all['heading1'].style.color='red';" />   
  30. <input type="button" value="Blue"   
  31. onclick="document.all['heading1'].style.color='blue';" />   
  32. <input type="button" value="Black"   
  33. onclick="document.all['heading1'].style.color='black';" />   
  34.  
  35.     
  36. <input type="text" name="userText" id="userText" size="30" />   
  37. <input type="button" value="Change Text"   
  38. onclick="document.all['heading1'].innerText=document.testform.userText.value;" />   
  39. </form>   
  40. </body>   
  41. </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")來獲得這個元素。

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
  2. "http://www.w3.org/TR/html4/loose.dtd">   
  3. <html>   
  4. <head>   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  6. <title>ById</title>   
  7. <style type="text/css">   
  8. <!--   
  9. #docid{   
  10. height:400px;   
  11. width:400px;   
  12. background-color:#999;}   
  13. -->   
  14. </style>   
  15. </head>   
  16. <body><div id="docid" name="docname" onClick="bgcolor()"></div>   
  17. </body>   
  18. </html>   
  19. <script language="javascript" type="text/javascript">   
  20. <!--   
  21. function bgcolor(){   
  22. document.getElementById("docid").style.backgroundColor="#000"   
  23. }   
  24. -->   
  25. </script>


2、getElementsByName()

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

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

比如有兩個DIV： 

  1. <div name="docname" id="docid1"></div>  
  2. <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中調試成功。） 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  5. <title>Byname,tag</title>   
  6. <style type="text/css">   
  7. <!--   
  8. #docid1,#docid2{   
  9. margin:10px;   
  10. height:400px;   
  11. width:400px;   
  12. background-color:#999;}   
  13. -->   
  14. </style>   
  15. </head>   
  16. <body>   
  17. <div name="docname" id="docid1" onClick="bgcolor()"></div>   
  18. <div name="docname" id="docid2" onClick="bgcolor()"></div>   
  19. </body>   
  20. </html>   
  21. <script language="javascript" type="text/javascript">   
  22. <!--   
  23. function bgcolor(){   
  24. var docnObj=document.getElementsByName("docname");   
  25. docnObj[0].style.backgroundColor = "black";   
  26. docnObj[1].style.backgroundColor = "black";   
  27. }   
  28. -->   
  29. </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。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  5. <title>Byname,tag</title>   
  6. <style type="text/css">   
  7. <!--   
  8. #docid1,#docid2{   
  9. margin:10px;   
  10. height:400px;   
  11. width:400px;   
  12. background-color:#999;}   
  13. -->   
  14. </style>   
  15. </head>   
  16. <body>   
  17. <div name="docname" id="docid1" onClick="bgcolor()"></div>   
  18. <div name="docname" id="docid2" onClick="bgcolor()"></div>   
  19. </body>   
  20. </html>   
  21. <script language="javascript" type="text/javascript">   
  22. <!--   
  23. function bgcolor(){   
  24. var docnObj=document.getElementsByTagName("div");   
  25. docnObj[0].style.backgroundColor = "black";   
  26. docnObj[1].style.backgroundColor = "black";   
  27. }   
  28. -->   
  29. </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思想的東西 其他的按浏覽器的理解去做就行)

附:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
  2. <html>   
  3. <head>   
  4. <script type="text/javascript">   
  5. <!--   
  6. function aa(){   
  7. var s="Elements with attribute 'name':\n";   
  8. var aaa=document.getElementsByName("a");   
  9. for(var i=0;i<aaa.length;i++)s+="\n"+aaa[i].tagName;   
  10. alert(s);   
  11. }   
  12. -->   
  13. </script>   
  14. <title> test </title>   
  15. </head>   
  16. <body>   
  17. <div name="a"><span name="a">1</span>2<input name="a" value="3"/><textarea name="a" rows="2" cols="8">4</textarea><button onclick="aa()">alert</button></div>   
  18. </body>   
  19. </html>


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

 

  1.   
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head>   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  6. <title>Byname,tag</title>   
  7. <style type="text/css">   
  8. <!--   
  9. #docid1,#docid2{   
  10. margin:10px;   
  11. height:400px;   
  12. width:400px;   
  13. background-color:#999;}   
  14. -->   
  15. </style>   
  16. </head>   
  17. <body>   
  18. <input name="docname" onmouseover="bgcolor()" onmouseout="bgcolor2()" />   
  19. <input name="docname" onmouseover="bgcolor()" onmouseout="bgcolor2()" />   
  20. </body>   
  21. </html>   
  22. <script language="javascript" type="text/javascript">   
  23. <!--   
  24. function bgcolor(){   
  25. var docnObj=document.getElementsByName("docname");   
  26. docnObj[0].style.backgroundColor = "black";   
  27. docnObj[1].style.backgroundColor = "black";   
  28. }   
  29. function bgcolor2(){   
  30. var docnObj=document.getElementsByName("docname");   
  31. docnObj[0].style.backgroundColor = "#fff";   
  32. docnObj[1].style.backgroundColor = "#fff";   
  33. }   
  34. -->   
  35. </script>

CSS進階教程
如何進行CSS布局
HTML的局限性迫使設計師們去開發更聰明的方式來使他們的網頁更美觀。過去最常用的工具是<tab
一切诋毀IE6的言論都是紙老虎:CSS Hacks
掌握 CSS Hacks 可以說是前端開發工程師的一個基本技能。隨著浏覽器版本的遍地開花，我們尋找著
更有效率的編寫CSS代碼
如何編寫CSS代碼才能更有效率？這是許多網頁制作者與開發者都關心的問題。大概沒有什

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
IE8的一個BUG：Hack 兼容方案 CSS實例教程:彈性+固寬布局 CSS網頁設計技巧:input按鈕在IE浏覽器的兼容問題 CSS網頁設計實例:15個用CSS設計的網頁表單實例 CSS學習教程:制作網頁中的虛線 引入CSS樣式的五種方式 CSS教程:復合型條狀圖表 SPAN和DIV,Class與ID的區別匯總 CSS實現Table單元格自動換行或不換行 css網頁制作實用技巧9則
熱門推薦
認識浏覽器：Mozilla項目 用戶體驗從試用的體驗和視覺的體驗開始 如何在CSS中設定文本的尺寸 用CSS的float和clear屬性進行三欄網頁布局 應聘網頁設計師常見的8個面試試題和答案 CSS的未來:鮮為人知的CSS 2.1和CSS3屬性 關於網頁表單實現和網頁布局如何運用表單 html5+css3網頁制作實例:制作comingsoon頁面 10個你未必知道的CSS技巧
大家都在看
9行javascript代碼獲取QQ群成員具體實現 基於jQuery的簡單的列表導航菜單 玩轉CSS CSS精彩實例教程(二) jQuery彈出(alert)select選擇的值 JS實現IE狀態欄文字縮放效果代碼 table td 圖片水平垂直居中實現代碼 jQuery簡單幾行代碼實現tab切換 bootstrap table小案例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved