JavaScript 操作 BOM對象

BOM模型

BOM:瀏覽器對象模型(Browser Object Model)
BOM提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構

BOM可實現功能

  • 彈出新的瀏覽器窗口
  • 移動、關閉瀏覽器窗口以及調整窗口的大小
  • 頁面的前進、後退

Window 對象

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一。

Window對象的常用屬性

常用屬性

屬性名稱 說 明
history 有關客戶訪問過的 URL 的信息
location 有關當前 URL 的信息

語法

window.屬性名="屬性值";
eg:
	window.location="http://www.baidu.com";

常用方法

方法名稱 說 明
prompt( ) 顯示可提示用戶輸入的對話框
alert( ) 顯示帶有一個提示信息和一個確定按鈕的警示框
confirm( ) 顯示一個帶有提示信息、確定和取消按鈕的對話框
close( ) 關閉瀏覽器窗口
open( ) 打開一個新的瀏覽器窗口,加載給定 URL 所指定的文檔
setTimeOut( ) 在指定的毫秒數後調用函數或計算表達式
setInterval( ) 按照指定的週期(以毫秒計)來調用函數或表達式

confirm( )、alert( )和prompt( )區別

  • alert( ):一個參數,僅顯示警告對話框的消息,無返回值,不能對腳本產生任何改變
  • prompt( ):兩個參數,輸入對話框,用來提示用戶輸入一些信息,單擊 “取消” 按鈕則返回null,單擊 “確定” 按鈕則返回用戶輸入的值,常用於收集用戶關於特定問題而反饋的信息
  • confirm( ):一個參數,確認對話框,顯示提示對話框的消息、“確定” 按鈕和 “取消” 按鈕,單擊 “確定” 按鈕返回true,單擊 " 取消" 按鈕返回false,因此常與if-else語句搭配使用

open( )方法

window.open(URL,name,features,replace)

參數 描述
URL 一個可選的字符串,聲明瞭要在新窗口中顯示的文檔的URL。如何省略了這個參數,或則它的值是空字符串,那麼新窗口就不會顯示任何文檔
name 可選。指定target屬性或窗口的名稱。支持以下值_blank(加載到一個新的窗口,默認)、_parent(加載到父框架)、_self(替換當前頁面)、_top(替換任何可加載的框架集)、name(窗口名稱)
features 可選。一個逗號分隔的項目列表。支持以下值:在這不做詳細介紹,下面會提到
replace Optional.Specifies規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目,還是替換瀏覽歷史中的當前條目。支持下面的值:true- (URL替換瀏覽歷史中的當前條目)。false- (URL 在瀏覽歷史中創建新的條目)

上面features會在接下來提到

窗口特徵(features)
在這裏插入圖片描述
history對象

常用方法

名稱 說 明
back() 加載 history 對象列表中的前一個URL
forward() 加載 history 對象列表中的下一個URL
go() 加載 history 對象列表中的某個具體URL

注意:
history.back()——>history.go(-1)(等價)
history.forward()——>history.go(1)

location對象

常用屬性

名稱 說 明
host 設置或返回主機名和當前URL的端口號
hostname 設置或返回當前URL的主機名
href 設置或返回完整的URL

常用方法

名稱 說 明
reload() 重新加載當前文檔
replace() 用新的文檔替換當前文檔

Document 對象

常用屬性

名稱 說明
referrer 返回載入當前文檔的URL
URL 返回當前文檔的URL

document對象的常用方法

名稱 說 明
getElementById() 返回對擁有指定id的第一個對象的引用
getElementsByName() 返回帶有指定名稱的對象的集合
getElementsByTagName() 返回帶有指定標籤名的對象的集合
write() 向文檔寫文本、HTML表達式或JavaScript代碼

innerHTML

innerHTML在 JS 中是雙向功能,獲取對象的內容向對象插入內容

innerHtml 屬性用於設置或返回指定標籤之間的 HTML內容。
語法
	object.innerHTML="HTML";//設置
	var html=object.innerHTML;//獲取

JavaScript 內置對象

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

Date對象

語法

	var 日期對象=new Date(參數);
	eg:
		var today=new Date();//返回當前日期和時間
		var today=new Date("June 28,2020,20:03:24");

常用方法

方法 說 明
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日)以來的毫秒數

Math對象

常用方法

方法 說 明 示例
ceil() 對數進行上舍入 Math.ceil(25.5);返回26
floor() 把數進行下舍入 Math.floor(25.5);返回25
round() 把數四捨五入爲最接近的數 Math.round(25.5);//返回26
random() 返回0~1之間的隨機數(不含1) Math.random();返回0.654598898665

定時函數

setTimeout()

語法
	setTimeOut("調用的函數","等待的毫秒數");//只執行一次
	eg:
		var myTime=setTimeOut("disptime()",1000);//1秒後執行函數
												disptime()一次

setInterval()

語法
	setInterval("調用的函數",間隔的毫秒數);//每隔多少毫秒執行一次
	eg:
		var myTime=setInterval("disptime()",1000);//每隔1秒執行函數
													disptime()一次

提示

如果要多次調用,使用setInterval()或者讓setTimeout()裏的函數自身再次調用
setTimeout()

清除函數

clearTimeout

語法
	clearTimeout(setTimeout()返回的ID值)
	eg:
		var myTime=setTimeout("disptime()",1000);
		clearTimeout(myTime);

clearInterval()

語法
	clearInterval(setInterval()返回的ID值)
	eg:
		var myTime=setInterval("disptime()",1000);
		clearInterval(myTime);

歸納

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章