1. 程式人生 > >JavaScript操作BOM物件

JavaScript操作BOM物件

window物件的常用屬性
  history   有關客戶訪問過的URL的資訊
  location  有關當前 URL 的資訊
  window.屬性名= "屬性值" 
  window.location="http://www.bdqn.cn" ;      


window物件的常用方法
prompt( )   顯示可提示使用者輸入的對話方塊
alert( )      顯示帶有一個提示資訊和一個確定按鈕的警示框 
confirm( )  顯示一個帶有提示資訊、確定和取消按鈕的對話方塊 
close( )   關閉瀏覽器視窗
open( )   開啟一個新的瀏覽器視窗,載入給定 URL 所指定的文件     window.open("彈出視窗的url","視窗名稱","視窗特徵”)

setTimeout( )   在指定的毫秒數後呼叫函式或計算表示式
setInterval( )   按照指定的週期(以毫秒計)來呼叫函式或表示式

 
history物件
常用方法
back()     載入 history 物件列表中的前一個URL
forward()  載入 history 物件列表中的下一個URL 
go()      載入 history 物件列表中的某個具體URL

location物件
host    設定或返回主機名和當前URL的埠號
hostname   設定或返回當前URL的主機名
href     設定或返回完整的URL

常用方法
reload()    重新載入當前文件
replace()   用新的文件替換當前文件

Document物件
常用屬性
referrer  返回載入當前文件的URL  
URL    返回當前文件的URL
document.referrer
document.URL

Document物件的常用方法2-1
getElementById()     返回對擁有指定id的第一個物件的引用     物件的id唯一
getElementsByName()   返回帶有指定名稱的物件的集合     相同name屬性
getElementsByTagName()   返回帶有指定標籤名的物件的集合     相同的元素
write()   向文件寫文字、HTML表示式或JavaScript程式碼


JavaScript內建物件
Array:用於在單獨的變數名中儲存一系列的值
String:用於支援對字串的處理
Math:用於執行常用的數學任務,它包含了若干個數字常量和函式
Date:用於操作日期和時間

Date物件2-1
var 日期物件=new Date(引數)
引數格式:MM  DD,YYYY,hh:mm:ss

Date物件的方法
getDate()   返回 Date 物件的一個月中的每一天,其值介於1~31之間
getDay()     返回 Date 物件的星期中的每一天,其值介於0~6之間
getHours()  返回 Date 物件的小時數,其值介於0~23之間
getMinutes()   返回 Date 物件的分鐘數,其值介於0~59之間
getSeconds()  返回 Date 物件的秒數,其值介於0~59之間
getMonth()   返回 Date 物件的月份,其值介於0~11之間
getFullYear()  返回 Date 物件的年份,其值為4位數
getTime()   返回自某一時刻(1970年1月1日)以來的毫秒數


onload="" 載入

Math物件
ceil()    對數進行上舍入       Math.ceil(25.5);返回26   Math.ceil(-25.5);返回-25
floor()   對數進行下舍入      Math.floor(25.5);返回25  Math.floor(-25.5);返回-26
round()  把數四捨五入為最接近的數    Math.round(25.5);返回26    Math.round(-25.5);返回-26
random()  返回0~1之間的隨機數    Math.random();例如:0.6273608814137365


定時函式2-1
setTimeout("呼叫的函式",等待的毫秒數)

定時函式2-2
setInterval("呼叫的函式",間隔的毫秒數)

清除函式
clearTimeout(setTimeOut()返回的ID值)
clearInterval(setInterval()返回的ID值)


訪問節點
使用getElement系列方法訪問指定節點
getElementById()、getElementsByName()、getElementsByTagName()

根據層次關係訪問節點2-1
節點屬性
parentNode     返回節點的父節點
childNodes      返回子節點集合,childNodes[i]
firstChild         返回節點的第一個子節點,最普遍的用法是訪問該元素的文字節點
lastChild         返回節點的最後一個子節點
nextSibling     下一個節點
previousSibling  上一個節點

element屬性
firstElementChild    返回節點的第一個子節點,最普遍的用法是訪問該元素的文字節點
lastElementChild     返回節點的最後一個子節點
nextElementSibling  下一個節點
previousElementSibling   上一個節點


節點資訊
    nodeName:節點名稱
    nodeValue:節點值
    nodeType:節點型別
節點型別          NodeType值
元素element         1
屬性attr                 2
文字text                 3
註釋comments       8
文件document       9

操作節點的屬性
getAttribute("屬性名")
setAttribute("屬性名","屬性值")


建立節點
createElement( tagName)         建立一個標籤名為tagName的新元素節點
A.appendChild( B)                    把B節點追加至A節點的末尾
insertBefore( A,B )                     把A節點插入到B節點之前
cloneNode(deep)                      複製某個指定的節點

刪除和替換節點
removeChild( node)                                          刪除指定的節點
replaceChild( newNode, oldNode)屬性attr         用其他的節點替換指定的節點


style屬性
HTML元素.style.樣式屬性="值"
document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

背景     backgroundColor、backgroundImage、backgroundRepeat
文字     fontSize、fontWeight、textAlign、textDecoration、font、color
邊距      padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
邊框      border、borderTop、borderBottom、borderLeft、borderRight

onclick             當用戶單擊某個物件時呼叫事件
onmouseover    滑鼠移到某元素之上
onmouseout     滑鼠從某元素移開
onmousedown   滑鼠按鈕被按下
function out(){
        document.getElementById("cart").style.backgroundColor="#f9f9f9";
        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
        document.getElementById("cartList").style.display="none";
    }


className屬性
HTML元素.className="樣式名稱"
function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

獲取元素的樣式
HTML元素.style.樣式屬性;
alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle(元素,null).屬性;
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

HTML元素. currentStyle.樣式屬性;
alert(document.getElementById("cartList").currentStyle.display);

HTML中元素屬性
   元素屬性應用
offsetLeft     返回當前元素左邊界到它上級元素的左邊界的距離,只讀屬性
offsetTop     返回當前元素上邊界到它上級元素的上邊界的距離,只讀屬性
offsetHeight  返回元素的高度
offsetWidth   返回元素的寬度
offsetParent   返回元素的偏移容器,即對最近的動態定位的包含元素的引用
scrollTop          返回匹配元素的滾動條的垂直位置
scrollLeft       返回匹配元素的滾動條的水平位置
clientWidth    返回元素的可見寬度
clientHeight   返回元素的可見高度

元素屬性應用
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
var sTop=document.documentElement.scrollTop||document.body.scrollTop;