JavaScript中document物件使用詳解_基礎知識

物件屬性

複製程式碼 程式碼如下:

document.title                 //以HTML中設定文件標題的「標價
document.bgColor               //以設定頁面背景色
document.fgColor               //設定前景色中與「文字顏色)
document.linkColor             //未點選的連結顏色
document.alinkColor            //以連結連結為對焦在此連結)的顏色
document.vlinkColor            //已點選的連結色彩
document.URL                   //設定URL屬性以在相同視窗開啟另一網頁
document.fileCreatedDate       //檔案建立日期，且唯讀屬性
document.fileModifiedDate      //檔案修改日期，且唯讀屬性
document.fileSize              //檔案大小，且只讀屬性
document.cookie                //設定與讀取cookie
document.charset               //設定字元集 簡體中文:gb2312

=============================================== =======================
body-主體子物件

複製程式碼 程式碼如下:

document.body                   //以
document.body.bgColor           //設定或取得物件後方的背景顏色
document.body.link              //未點選的連結顏色
document.body.alink             //啟動連結(焦點在此連結)的色彩
document.body.vlink             //已點選的連結顏色
document.body.text              //文字色彩
document.body.innerText         //設定...之間的文字
document.body.innerHTML         //設定...之間的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          // 網域名稱 連接埠號碼
document.location.hostname      // 網域
document.location.href          // 完整網址
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)      //開啟新的網頁

=============================================== =======================
images集合(頁面中的圖象)
a)透過集合引用

複製程式碼 程式碼如下:

document.images                 //與頁面上的標籤
document.images.length          //對應頁上標籤的數量
document.images[0]              //第1個標籤
document.images              //第i-1個標籤

b)透過name屬性直接引用

複製程式碼 程式碼如下:

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"

同時在頁面上建立一個標籤與之對應就可以顯示
範例程式碼(動態建立圖象)：

複製程式碼 程式碼如下:

=============================================== ======================
forms集合(頁面中的表單)
a)透過集合引用

複製程式碼 程式碼如下:

document.forms                     //對應頁面的

標籤
document.forms.length              //對應頁面上

標籤的數量
document.forms[0]                  //第1個

標籤
document.forms                  //第i-1個

標籤
document.forms.length           //第i-1個

中的控制數
document.forms.elements[j]      //第i-1個

中第j-1個控制項

----------------------------
b)透過標籤name屬性直接引用

複製程式碼 程式碼如下:

document.Myform.myctrl             //document.表單名稱.控制名稱

----------------------------
c)存取表單的屬性

複製程式碼 程式碼如下:

document.forms.name             //對應

屬性
document.forms.action           //對應

屬性
document.forms.encoding         //對應

屬性
document.forms.target           //對應

屬性
document.forms.appendChild(oTag) //動態插入一個控制項

----------------------------
範例程式碼(form)：

複製程式碼 程式碼如下:

----------------------------
範例程式碼(checkbox)：

複製程式碼 程式碼如下:

1    
2    

    
     
ddd                     

----------------------------
範例程式碼(Select)：

複製程式碼 程式碼如下:

1
2
3

=============================================== =======================
Div集合(頁中的圖層)

複製程式碼 程式碼如下:

テキスト

document.all.odiv document.all.oDiv.style.display="" //レイヤーを表示に設定します
document.all.oDiv.style.display="none" //レイヤーを非表示に設定します
document.getElementId("oDiv") // getElementId
を通じてオブジェクトを参照します document.getElementId("oDiv").
document.getElementId("oDiv").display="none"
/*document.all は、ドキュメント内のすべてのオブジェクトのコレクションを表します
この属性は IE のみがサポートしているため、ブラウザの種類を決定するためにも使用されます*/

レイヤーオブジェクトの 4 つのプロパティ

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

document.getElementById("ID").innerText //動的出力テキスト
document.getElementById("ID").innerHTML //動的出力HTML
document.getElementById("ID").outerText //innerText
と同じ document.getElementById("ID").outerHTML //innerHTML
と同じ

---------------------------------

サンプルコード:

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

<スクリプト言語="javascript">
関数change(){
document.all.oDiv.style.display="none"
}

テキスト

<スクリプト言語="javascript">
関数changeText(){
document.getElementById("oDiv").innerText="NewText"
}

テキスト