javascript裏的document.all用法收集

時間 2021-01-30

標籤 javascript css html java 數組瀏覽器 less ide 網站欄目 JavaScript 简体版

原文原文鏈接

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（這個可讓你理解文檔中哪些是對象）

　它的執行結果是:

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（訪問一個特定元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" [url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>單擊DIV變色</title>
<style type="text/css">

</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">

</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]就能夠訪問了。

　　三、使用document.all[]

例3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<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">
<br /><br />
<input type="button" value="Align Left"
onclick="document.all['heading1'].align='left';" />//改變<h1></h1>標籤對中的align屬性的值,下面的代碼做用相同
<input type="button" value="Align Center"
onclick="document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
onclick="document.all['heading1'].align='right';" />
<br /><br />
<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';" />
<br /><br />
<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';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
onclick="document.all['heading1'].innerText=document.testform.userText.value;" />//改變<h1></h1>標籤對中的文本內容
</form>
</body>
</html>

四、標準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中的任一個標籤：

　　一、getElementById()

　　getElementById()能夠訪問DOCUMENT中的某一特定元素，顧名思義，就是經過ID來取得元素，因此只能訪問設置了ID的元素。

　　好比說有一個DIV的ID爲docid：

　　那麼就能夠用getElementById("docid")來得到這個元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" [url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ById</title>
<style type="text/css">

</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">

</script>

　　二、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中調試成功。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">

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

</script>

　三、getElementsByTagName()

　　這個呢就是經過TAGNAME（標籤名稱）來得到元素，一個DOCUMENT中固然會有相同的標籤，因此這個方法也是取得一個數組。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Byname,tag</title> <style type="text/css">  </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">  </script>