茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1523726 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_00079.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]javascript裡的document.all用法收集

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15763
[轉貼]javascript裡的document.all用法收集
javascript裡的document.all用法收集

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(這個可以讓你理解文檔中哪些是對像):
<!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
		</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>
		<hr />
	<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>


它的執行結果是:
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">
			<!--
			#docid{
			height:400px;
			width:400px;
			background-color:#999;}
			-->
		</style>
	</head>
	<body>
		<div id="docid" name="docname" onClick="bgcolor()">
		</div>
	</body>
</html>
<script language="javascript" type="text/javascript">
	<!--
		function bgcolor(){
	 		document.all[7].style.backgroundColor="#000"
		}
	-->
</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]就可以訪問了。


3、使用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>
<!-- 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';" />
	//改變<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>


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")來獲得這個元素。
<!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">
			<!--
			#docid{
			height:400px;
			width:400px;
			background-color:#999;}
			-->
		</style>
	</head>
	<body>
		<div id="docid" name="docname" onClick="bgcolor()">
		</div>
	</body>
</html>
<script language="javascript" type="text/javascript">
	<!--
		function bgcolor(){
			document.getElementById("docid").style.backgroundColor="#000"
		}
	-->
</script>


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"
"[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">
			<!--
			#docid1,#docid2{
			margin:10px;
			height:400px;
			width:400px;
			background-color:#999;}
			-->
		</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">
	<!--
		function bgcolor(){
			var docnObj=document.getElementsByName("docname");
			docnObj[0].style.backgroundColor = "black";
			docnObj[1].style.backgroundColor = "black";
		}
	-->
</script>


3、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">
			<!--
			#docid1,#docid2{
			margin:10px;
			height:400px;
			width:400px;
			background-color:#999;}
			-->
		</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">
	<!--
		function bgcolor(){
			var docnObj=document.getElementsByTagName("div");
			docnObj[0].style.backgroundColor = "black";
			docnObj[1].style.backgroundColor = "black";
		}
	-->
</script>



原文出處:javascript里的document.all用法收集 - 独狼前行 - 51CTO技术博客
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15763
[轉貼]javascript取得 HTML 中的元素

先來看一下範例:



在這範例中,若要取得 form 裡面的 text 的元素的話,相信應該是很多人都會用 document.all("text1") 或是用 document.form1.text1 吧!在 IE 、 FireFox 及 Opera 中,以上兩種寫法都是可以執行的,但要注意的是: document.all 並非是標準的寫法

而在 W3C 的標準中,建議使用 getElementById 來取得某特定 ID 的元素;另外也可以用 getElementsByName 或是 getElementsByTagName 來取得某特定 Name 或是類型的元素集合。

getElementById(elementId)

在 HTML 中,每個元素都可以有自己專屬的 ID 。 在 HTML 中要使用 id 屬性來指定 ID ,且在 HTML 中是不能有元素使用同一個 ID 的,但是可以不使用 ID 。所以在上面的範例中,我們可以用 document.getElementById("text1") 來取得 ID 為 text1 的元素。

getElementsByName(elementName)

若用 document.getElementsByName 的話,則可以取得所有某特定 Name 的元素集合。回傳的元素集合是一個陣列。所以在上面的範例中,我們可以用 document.getElementsByName("text1") 來取得 Name 為 text1 的元素集合,而在元素集合中的第一個元素則是 document.getElementsByName("text1")[0] 。

註: getElementsByName 在 DOM Level 3 中已經被拿掉了。

getElementsByTagName(tagName)


若用 document.getElementsByTagName 的話,則可以取得所有某特定類型的元素集合。回傳的元素集合是一個陣列。所以在上面的範例中,我們可以用 document.getElementsByTagName("input") 來取得類型為 input 的元素集合,而在元素集合中的第一個元素則是 document.getElementsByTagName("input")[0] 。

總結:所以像 document.all 這種非標準的語法就別再使用了,請改用 document.getElementById(elementId) 。

另外要注意的是,除了 getElement sByName 跟 getElement sByTagName 中都有一個 s 而 getElementById 則沒有喔!你就把它想成是因為 getElementById 只是取得單一元素,而 getElementsByName 跟 getElementsByTagName 都是取得元素集合,所以是複數型態就要加 s囉。

且 getElementsByName 跟 getElementsByTagName 一定會回傳一個元素集合的陣列,即使符合該條件的元素只有一個。

範例瀏覽:

   
  http://abgne.myweb.hinet.net/JavaScript/0001/0001_1.html

      http://abgne.myweb.hinet.net/JavaScript/0001/0001_2.html

     
http://abgne.myweb.hinet.net/JavaScript/0001/0001_3.html


原文出處:取得 HTML 中的元素 @ 男丁格爾 in Xuite :: Xuite日誌
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15763
[轉貼]Javascript 設定 getElementById 屬性的方法

Javascript 設定 getElementById 屬性的方法

紀錄 Javascript 設定 getElementById 的方法, 和 Style 有哪些屬性可以設定.(暫不討論 Framework 的寫法, 不過 style 能設的屬性是都一樣的. XD)

document.getElementById('NAME') 裡面的 NAME 就是 html tag 的 id="NAME". ex: <div id="choose">test</div>, 用 document.getElementById('choose').innerHTML 就可以抓到 test.

修改 Id 的 Html Tag 的值 

要修改 <div id="choose">test</div> 的值, 要用下述方法:

var choose = document.getElementById('choose');
choose.innerHTML = 'book'; // 這樣子頁面上的 test 就會被改成 book 了.
// 或 document.getElementById('choose').innerHTML = 'book';

設定 Id 的 HTML Tag Style 屬性

設定屬性的做法是

document.getElementById('ID名稱').style.屬性 = '設定值';

ex:


  • document.getElementById('choose').style.fontWeight = 'bold'; 
  • document.getElementById('choose').style.color = '#448ECC';

有哪些 Style 可以設定?

PS: 要測試請將 javascript 至於 <body> 的最後面.(HTML 都已經產生出來, 才不會有 js error) 

其它

 


原文出處:Javascript 設定 getElementById 屬性的方法 | Tsung's Blog
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15763
[轉貼]javascript getElementById 使用方法及用法

javascript getElementById 使用方法及用法

顧明思義,get-Element-By-Id,就是通過ID來設置/返回HTML標籤的屬性及調用其事件與方法。用這個方法基本上可以控制頁面所有標籤,條件很簡單就是給每個標籤分配一個ID號


document.getElementById("link").href;
document.getElementById("link").target;
document.getElementById("img").src;
document.getElementById("img").width;
document.getElementById("img").height;
document.getElementById("input").value;
那麼如何取得<div></div>以及<a></a>之間的值呢?如<div id="div">aaa</div>中的aaa,<a href="#" id="link">bbb</a>中的bbb,也很簡單,利用innerHTML就可以了:
document.getElementById("div").innerHTML;
document.getElementById("link").innerHTML;
getElementById 方法
返回具有指定 ID 屬性值的第一個對象的一個引用。
語法
oElement = document.getElementById(sIDValue)
參數
sIDValue 必選項。指明 ID 屬性值的字符串
返回值
返回 ID 屬性值與指定值相同的第一個對象。
註釋
如果 ID 屬於一個集合,getElementById 方法返回集合中的第一個對象。
getElementById 方法與使用 all 集合上的 item 方法等同。例如,以下代碼樣本表示如何從 document 對像中取回 ID 為 oDiv 的第一個要素。
使用 DHTML 對像模型:

var oVDiv = document.body.all.item("oDiv");
使用文檔對像模型(DOM):
var oVDiv = document.getElementById("oDiv");
示例
以下例子表示如何使用 getElementById 方法返回 ID 屬性值 oDiv 的第一次出現。
<script>
function fnGetId(){
// Returns the first DIV element in the collection.
var oVDiv=document.getElementById("oDiv1");
}
</script>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">
getElementById 方法
返回具有指定 ID 屬性值的第一個比如說有個網頁中有個text框的id叫text1
getElementById(text1)就能得到這個text1框的對象,並使用text框的所有屬性和方法
這個是JS的一個方法,意思是通過控件ID取得元素的值,如一個form裡包涵text、label等,他們都是FORM的元素,有一個分配的ID,getElementById()是取得這些元素的text值的。
這個是JS的一個方法,意思是通過控件ID取得元素的值,如一個form裡包涵text、label等,他們都是FORM的元素,有一個分配的ID,getElementById()是取得這些元素的text值的。
程序舉例




支隊一個單元隔進行對齊



改變colspan的值



原文出處:javascript getElementById 使用方法及用法_javascript技巧_脚本之家
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|