JS的Document屬性與方法小結_基礎知識

document.title //設定文件標題等價於HTML的title標籤
document.bgColor //設定頁面背景色
document.fgColor //設定前景色(文字顏色)
document.linkor //未點擊過的連結顏色
document.alinkColor //啟動連結(焦點在此連結上)的顏色
document.vlinkColor //已點選過的連結顏色
document.URL //設定URL屬性從而在同一視窗開啟另一網頁
document.fileCreatedDate //檔案建立日期，唯讀屬性
document.fileModifiedDate //檔案修改日期，只讀屬性
document.charset //設定字元集簡體中文:gb2312
document.fileSize //檔案大小，唯讀屬性
document.cookie //設定與讀取cookie

—————————————— —————————
常用物件方法

document.write() //動態寫入內容
document.createElement(Tag) //建立一個html標籤對象
document.getElementById(ID) //取得指定ID值的物件
document.getElementsByName(Name) //取得指定Name值的物件
document.body.appendChild(oTag)
—— —————————————————————

body-主體子物件

document.body //指定文件主體的開始與結束等價於body>/body>
document.body.bgColor //設定或取得物件後面的背景顏色
document.body.link //未點擊過的連結顏色
document.body.alink //啟動連結(焦點在此連結上)的顏色
document.body.vlink //已點擊過的連結顏色
document.body.text //文字色
document.body.innerText / /設定body>…/body>之間的文字
document.body.innerHTML //設定body>…/body>之間的HTML程式碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態產生一個HTML物件

常用物件事件

document.body.onclick=”func()” //滑鼠指標點選物件是觸發
document.body.onmouseover=”func()” //滑鼠指標移到物件時觸發
document.body.onmouseout=”func()” //滑鼠指標移出物件時觸發
— ——————————————————————
location-位置子物件

document.location.hash // #號後的部分
document.location.host // 網域名稱埠號碼//好像回傳的是主機名稱localhost,沒有回傳埠號碼
document.location.hostname // 網域名稱
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 連接埠號碼
document.location.protocol // 網路協定(http:)
document.location.search // ?號後面的部分
documeny.location.reload() //刷新網頁
document.location.reload(URL) //打開新的網頁
document.location.assign(URL) //打開新的網頁
document.location.replace(URL) //開啟新的網頁
———————————————————————
selection-選區子物件
document.selection

例如：

複製程式碼

複製程式碼

程式碼>

請選取這裡的部分文字。

document.selection.empty(); } } } -->

selection的createRange方法

document.selection.createRange() 根據目前文字選擇傳回 TextRange 對象，或依控制項選擇傳回 ControlRange 物件。

配合 execCommand，在 HTML 編輯器中很有用，例如：文字加粗、斜體、複製、貼上、建立超連結等。

這些好像都是只有在IE下才能實現。 。

———————————————————————

images集合(頁中的圖象)

a)透過集合引用
document.images //對應頁面上的img標籤
document.images.length //對應頁面上img標籤的個數
document.images[0] //第1個img標籤
document.images[i] //第i-1個img標籤

b)透過name屬性直接引用
img name=”oImage”
document.images. oImage //document.images.name屬性

c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src

d)建立一個圖象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同時在頁面上建立一個img /標籤與之對應就可以顯示

———————————————————————-

forms集合(頁面中的表單)

a)透過集合引用
document.forms //對應頁面上的form標籤
document.forms.length //對應頁面上/formform標籤的個數
document.forms[0] / /第1個/formform標籤
document.forms[i] //第i-1個/formform標籤
document.forms[i].length //第i-1個/formform中的控制項數
document.forms[i].elements[j] //第i-1個/formform中第j-1個控制項

b)透過標籤name屬性直接引用
/formform name =”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表單名稱.控制項名稱

c)存取表單的屬性
document.forms [i].name //對應form name>屬性
document.forms[i].action //對應/formform action>屬性
document.forms[i].encoding //對應/formform enctype>屬性
document.forms[i].target //對應/formform target>屬性

document.forms[i].appendChild(oTag) //動態插入一個控制項
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=”" //圖層設定為可視
document.all.oDiv.style.display=”none” //圖層設置為隱藏
document.getElementId(”oDiv”) //透過getElementId引用物件
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=” none”
/*document.all表示document中所有物件的集合
只有ie支援此屬性，因此也用來判斷瀏覽器的種類*/


圖層物件的4個屬性
document.getElementById(”ID”).innerText //動態輸出文字
document.getElementById(”ID”).innerHTML //動態輸出HTML
document.getElementById(”ID”) .outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML

--------------------- -------------------------------------------------- -------------------------------------------------- -----------------------------------------
document.readyState:判斷文檔是否加載完成。 firefox不支援。

這個屬性是唯讀的，傳回值有以下的可能：

0-UNINITIALIZED：XML 物件產生，但沒有任何檔案被載入。
1-LOADING：載入程式進行中，但檔案尚未開始解析。
2-LOADED：部分的檔案已經載入且進行解析，但物件模型尚未生效。
3-INTERACTIVE：僅對已載入的部分檔案有效，在此情況下，物件模型是有效但唯讀的。
4-COMPLETED：檔案已完全加載，代表加載成功。

複製程式碼 程式碼如下:

document.onreadystate = subSomething;改變的時候執行這個方法.
function subSomething()
{
if(document.readyState == "complete"){ //當頁面載入狀態為完全結束時進入
//你要做的操作。
}
else if(document.readyState=="loading"){
}
}

比較好的範例：http://www.jb51.net/article/20445.htm

說明 ：onreadystatechange 事件能辨識readyState 屬性的改變。

document.all(只被IE支援)

action：document.layers是Netscape 4.x專有的屬性，是一個代表所有由儲如

等定位了的元素的陣列通常也是用

或物件的id屬性來引用的，但是這裡面不包含除此以外的其它元素

document.layers和document.all的用法是一樣的，功能也是相同的。所在我就只介紹一種用法:
document.all的意思是文檔的所有元素，也就是說它包含了當前網頁的所有元素。它是以陣列的形式保存元素的屬性的，所以我們可以用 document.all["元素名稱"].屬性名稱="屬性值"來動態改變元素的屬性。用這條語句，可以做出許許多多動態網頁效果，如：動態變換圖片、動態改變文字的背景、動態改變網頁的背景、動態改變圖片的大小、動態改變文字的大小各顏色等等。你簡直可以動態控制所有網頁元素。
document.all[]這個陣列可以存取文件中所有元素。

例1（這個可以讓你理解文件中哪些是物件）

複製程式碼 程式碼如下:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

Example Heading

---

This is a paragraph. It is only a paragraph.

Yet another paragraph.

This final paragraph has special emphasis.

---

body>

它的執行結果是:
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上運行)

複製程式碼 程式碼如下:

上記の例では、ドキュメント

内の DIV など、ドキュメント内の特定の要素にアクセスする方法を理解できます。この DIV には、ID、NAME、または INDEX 属性を通じてアクセスできます:
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div") は、ドキュメント内のすべての DIV の配列を返します。 DIV は 1 つだけなので、document.all.tags("div")[0] でアクセスできます。

3. document.all[] を使用します
例 3

コードをコピーします コードは次のとおりです

"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">




< ;body>

DHTML 楽しいです!!!

onclick="document.all['Heading1'].align='left';" /> タグ ペアの align 属性の値を変更します。次のコードは同じ効果があります
onclick= "document.all['Heading1 '].align='center'; />
onclick="document.all['Heading1'" ].align='right' ;" />



onclick="ドキュメント.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;" /& gt;//Change< h1> タグペア