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                指定文檔主體的開始和結束等價於bodybody
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. 鼠標指針單擊對象是觸發
document.body. 鼠標指針移到對象時觸發
document.body. 鼠標指針移出對象時觸發 
---------------------------------------------------------------------
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
---------------------------------------------------------------------

p_w_picpaths集合(頁面中的圖象)

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

b)通過nane屬性直接引用
img name=oImage
document.p_w_picpaths.oImage       document.p_w_picpaths.name屬性

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

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

html
img name=oImage
script language=javascript
    var oImage
    oImage = new Image()
    document.p_w_picpaths.oImage.src=1.jpg
script
html

html
script language=javascript
    oImage=document.caeateElement(IMG)
    oImage.src=1.jpg
    document.body.appendChild(oImage)
script
html

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

forms集合(頁面中的表單)

a)通過集合引用
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個控件

b)通過標籤name屬性直接引用
form name=Myforminput name=myctrlform
document.Myform.myctrl          document.表單名.控件名

c)訪問表單的屬性
document.forms[i].name          對應form name屬性
document.forms[i].action        對應form action屬性
document.forms[i].encoding      對應form enctype屬性
document.forms[i].target        對應form target屬性

document.forms[i].appendChild(oTag) 動態插入一個控件
-----------------------------------------------------------------------
html
!--Text控件相關Script--
form name=Myform
input type=text name=oText
input type=password name=oPswd
form
script language=javascript
獲取文本密碼框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
script
html
-----------------------------------------------------------------------
html
!--checkbox,radio控件相關script--
form name=Myform
input type=checkbox name=chk value=11     
input type=checkbox name=chk value=22     
form     
script language=javascript     
function fun(){     
   遍歷checkbox控件的值並判斷是否選中     
   var length     
   length=document.forms[0].chk.length     
   for(i=0;ilength;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()ddda                      
html 
-----------------------------------------------------------------------
html
!--Select控件相關Script--
form name=Myform
select name=oSelect
option value=11option
option value=22option
option value=33option
select
form

script language=javascript
    遍歷select控件的option項
    var length
    length=document.Myform.oSelect.length
    for(i=0;ilength;i++)
    document.write(document.Myform.oSelect[i].value)
script

script language=javascript
    遍歷option項並且判斷某個option是否被選中
    for(i=0;idocument.Myform.oSelect.length;i++){
    if(document.Myform.oSelect[i].selected!=true)
    document.write(document.Myform.oSelect[i].value)
    else
    document.write(font color=red+document.Myform.oSelect[i].value+font)   
    }
script

script language=javascript
    根據SelectedIndex打印出選中的option
    (0到document.Myform.oSelect.length-1)
    i=document.Myform.oSelect.selectedIndex
    document.write(document.Myform.oSelect[i].value)
script

script language=javascript
    動態增加select控件的option項
    var oOption = document.createElement(OPTION);
    oOption.text=4;
    oOption.value=4;
    document.Myform.oSelect.add(oOption);
script
html
-----------------------------------------------------------------------
Div id=oDivTextDiv
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

html
script language=javascript
function change(){
document.all.oDiv.style.display=none
}
script
Div id=oDiv onclick=change()TextDiv
html

html
script language=javascript
function changeText(){
document.getElementById(oDiv).innerText=NewText
}
script
Div id=oDiv onmouseover=changeText()TextDiv
html