天天看點
傳回

JavaScript中的BOM操作JavaScript中的BOM操作

JavaScript中的BOM操作

Bom：浏覽器對象模型（Browser Object Model，簡稱 BOM）提供了獨立于内容而與浏覽器視窗進行互動的對象。描述了與浏覽器進行互動的方法和接口，可以對浏覽器視窗進行通路和操作

一、Window 對象

（1）window.open()

定義和用法

open() 方法用于打開一個新的浏覽器視窗或查找一個已命名的視窗

文法

window.open(URL,name,specs,replace) [預設填寫url，name這兩個參數值即可]

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM操作</title>     
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                window.open('http://baidu.com','_blank')   
                //參數一：url位址
                //參數二：同a标簽裡面的target屬性；有四個可選值：_blank(新視窗，預設) _self(目前視窗) _parent  _top
                //一般用window.open()參數填寫兩個即可
            }
        }
    </script>
</head>
<body>
    <input type="button" value="click" id="btn">
</html>

（2）window.close()

定義和用法

close() 方法用于關閉浏覽器視窗。

文法

window.close()

說明

方法 close() 将關閉有 window 指定的頂層浏覽器視窗。某個視窗可以通過調用 self.close() 或隻調用 close() 來關閉其自身。

在火狐浏覽器中，隻有通過 JavaScript 代碼打開的視窗才能夠由 JavaScript 代碼關閉。這阻止了惡意的腳本終止使用者的浏覽器。

（3）window.navigator.userAgent

定義：

擷取目前浏覽器版本

（4）window.location

定義：

擷取目前頁面的位址/網址

用法：

不光可以讀、還可以寫 　　例如：window.location=‘http://baidu.com’ 即可轉到指定頁面

（5）document.documentElement.scrollTop(擷取滾動條位置)

【通俗來講就是：擷取目前頁面的滾動條縱坐标位置】

（6）系統對話框

1》警告框：alert（‘内容’）　　　　　　 【沒有傳回值】

2》選擇框：confirm（‘提問的内容’）　 【确認：傳回true；取消：傳回false】

3》輸入框：prompt（）　　　　　　　 【确認：傳回輸入的内容；取消：傳回null】

二、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.domain //直接擷取域名

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

常用對象方法

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

document.body.οnmοuseοver=”func()” //滑鼠指針移到對象時觸發

document.body.οnmοuseοut=”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集合(頁面中的表單)

a)通過集合引用

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

三、History 對象

JavaScript中的BOM操作JavaScript中的BOM操作

history.back() 等同于按浏覽器的後退按鈕

history.forward() 等同于按浏覽器的前進按鈕

history.current 指目前的url(等同于location.href),在曆史中的索引位置總為 0

history.go(-2)或 history.go(“任意.html”) 向前或向後移動，或查找字元串标明的最新url

四、Loaction 對象

location提供了關于目前打開視窗或者特定架構的url資訊。一個多架構的視窗對象在location屬性顯示的是父視窗的URL，每個架構也有一個與之相伴的location對象。

Location.href 傳回整個目前url,若對其指派：location.href=“http://www.baidu.com” 則跳轉其url

location.host 傳回域名和端口号，如：www.baidu.com:80

lcation.hostname 傳回域名

location.port 傳回端口

location.pathname 傳回域名後第一個斜框後的字元串

location.hash 跳到本頁的某個錨

location.search 取url?後的部分

location.protocal協定

　 hash屬性:

　 hash标注是一個url很好的習慣用法，它指定浏覽器到一個位于文檔中的anchor位置，相當于一個書簽兒。

　　host屬性:

　　描述漁歌url的主機名和端口，隻有端口号是url的一個明确部分時，值中才包括端口号。

　　hostname屬性：

　　一個典型的url的主機名是網絡上伺服器的名字，該網絡存儲有你的浏覽器上可以檢視的文檔。對大多數Web站點來說，伺服器名不僅包括域名，也包括www字首，如果端口号是在url中特有的話，主機名并不包括，而是包括在host屬性中。

　　href屬性:

　　該屬性提供一個指定視窗對象的整個url的字元串。

　　pathname屬性:

　　url的路徑名部分由與伺服器root（根）卷相關的目錄結構組成。根不是目錄的一部分，如果url的路徑是通向根目錄中的一個檔案，那麼location.pathname屬性就是（/）。

　　port屬性:

　　端口号很少用到。當指向一個沒有賦給域名的的站點的url中，可以用location.port屬性擷取該值，如果從一個url擷取值并想用那個組建建立一個url，一定要包括伺服器IP位址和段口号，IP位址和段口号之間用（:）分界。

　　protocol屬性:

　　包括協定名，且後面緊跟着（:）分節目。

　　assign方法:

　　assign(“url”)通過這個方法可以實作把一個新的url賦給location對象。當然你也可以采用直接指派的方法來實作，或者location.href來導航到一個新的網頁。采用assign的方法會使代碼易維護。

　　reload方法:

　　這個方法可以把浏覽器可能儲存在記憶體中的元素（在一段記錄中）的文檔設定全部忽略掉，重新打開該文檔，和浏覽器上的重新整理可不一樣。它的效果好像是你選擇了file菜單open file一樣。當然如果你不想這樣，不想這麼做，有一個和這個方法比較類似的方法，就是history.go（）方法。

　　replace方法:

　　當使用者從目前網頁，跳轉到别的網頁，有時候是不是想讓不能用後退按鈕(Back)看到前一個網頁，告訴你一個方法，就是采用location.replace(“url”)就可以實作這個功能。

reload方法/replace方法的說明

replace()方法在效果上與直接将新URL位址指派給location.href屬性基本一緻，但是使用replace()方法後，我們無法通過浏覽器的“傳回”按鈕來回到上一頁。

reload()方法和浏覽器的“重新整理”功能也有所差別，reload()方法僅僅是重新加載本地的緩存，而不會向伺服器重新送出請求，這點還沒有嚴格的測試過，不過應該在包含有表單的頁面中特别注意。

javascript JavaScript中的BOM操作
上一篇: JavaScript操作BOM
下一篇: BOM對象-JavaScript筆記什麼是BOM

繼續閱讀