javascript中document對象詳解

注:頁面上元 素name屬性和JavaScript引用的名稱必須一緻包括大小寫

否則會提示你一個錯誤資訊 “引用的元素為空或者不是對象\\\\\”

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

對象屬性

document.title //設定文檔标題等價于HTML的title标簽

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

常用對象方法

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 // 域名+端口号

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

images集合(頁面中的圖象)

a)通過集合引用

document.images //對應頁面上的img标簽

document.images.length //對應頁面上img标簽的個數

document.images[0] //第1個img标簽

document.images[i] //第i-1個img标簽

b)通過nane屬性直接引用

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集合(頁面中的表單)

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

Javascript的document對象

對象屬性:

document.title                 //設定文檔标題等價于HTML的<title>标簽

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

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

常用對象方法:

document.write()                      //動态向頁面寫入内容

document.createElement(Tag)           //建立一個html标簽對象

document.getElementById(ID)           //獲得指定ID值的對象

document.getElementsByName(Name)      //獲得指定Name值的對象

========================================================================

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.onclick="func()"              //滑鼠指針單擊對象是觸發

document.body.onmouseover="func()"          //滑鼠指針移到對象時觸發

document.body.onmouseout="func()"           //滑鼠指針移出對象時觸發

location-位置子對象:

document.location.hash          // #号後的部分

document.location.host          //域名+端口号

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)      //打開新的網頁

images集合(頁面中的圖象):

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屬性

document.images.oImage.src      //document.images.name屬性.src

document.images.oImage.src="1.jpg"

同時在頁面上建立一個<img>标簽與之對應就可以顯示

示例代碼(動态建立圖象)：

<html>

<img name=oImage>

< script language="javascript">

       var oImage

       oImage = new Image()

       document.images.oImage.src="1.jpg"

< /script>

< /html>

< html>

       oImage=document.caeateElement("IMG")

       oImage.src="1.jpg"

       document.body.appendChild(oImage)

forms集合(頁面中的表單):

document.forms                     //對應頁面上的<form>标簽

document.forms.length              //對應頁面上<form>标簽的個數

document.forms[0]                  //第1個<form>标簽

document.forms[i]                  //第i-1個<form>标簽

document.forms[i].length           //第i-1個<form>中的控件數

document.forms[i].elements[j]      //第i-1個<form>中第j-1個控件

<form name="Myform"><input name="myctrl"></form>

document.Myform.myctrl             //document.表單名.控件名

document.forms[i].name             //對應<form name>屬性

document.forms[i].action           //對應<form action>屬性

document.forms[i].encoding         //對應<form enctype>屬性

document.forms[i].target           //對應<form target>屬性

示例代碼(form)：

< !--Text控件相關Script-->

<form name="Myform">

< input type="text" name="oText">

< input type="password" name="oPswd">

< form>

//擷取文本密碼框的值

document.write(document.Myform.oText.value)

document.write(document.Myform.oPswd.value)

示例代碼(checkbox)：

< !--checkbox,radio控件相關script-->

< input type="checkbox" name="chk" value="1">1    

< input type="checkbox" name="chk" value="2">2    

< /form>    

< script language="javascript">    

function fun(){    

      //周遊checkbox控件的值并判斷是否選中    

      var length    

      length=document.forms[0].chk.length    

      for(i=0;i<length;i++){    

      v=document.forms[0].chk[i].value    

      b=document.forms[0].chk[i].checked   

      if(b)    

        alert(v=v+"被選中")    

      else    

        alert(v=v+"未選中")   

      }    

< /script>     

< a href=# onclick="fun()">ddd</a>                    

示例代碼(Select)：

< !--Select控件相關Script-->

< select name="oSelect">

< option value="1">1</option>

< option value="2">2</option>

< option value="3">3</option>

< /select>

< /form>

       //周遊select控件的option項

       var length

       length=document.Myform.oSelect.length

       for(i=0;i<length;i++)

       document.write(document.Myform.oSelect[i].value)

       //周遊option項并且判斷某個option是否被選中

       for(i=0;i<document.Myform.oSelect.length;i++){

       if(document.Myform.oSelect[i].selected!=true)

       else

       document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>") 

       }

       //根據SelectedIndex列印出選中的option

       //(0到document.Myform.oSelect.length-1)

       i=document.Myform.oSelect.selectedIndex

       //動态增加select控件的option項

       var oOption = document.createElement("OPTION");

       oOption.text="4";

       oOption.value="4";

       document.Myform.oSelect.add(oOption);

Div集合(頁面中的層):

<Div id="oDiv">Text</Div>

document.all.oDiv                                  //引用圖層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表示document中所有對象的集合

document.getElementById("ID").innerText      //動态輸出文本

document.getElementById("ID").innerHTML      //動态輸出HTML

document.getElementById("ID").outerText      //同innerText

document.getElementById("ID").outerHTML      //同innerHTML

示例代碼：

function change(){

document.all.oDiv.style.display="none"

}

< Div id="oDiv" onclick="change()">Text</Div>

function changeText(){

document.getElementById("oDiv").innerText="NewText"

< Div id="oDiv" onmouseover="changeText()">Text</Div>