BOM(瀏覽器物件模型)
BOM(瀏覽器物件模型)簡介
BOM是Browser Object Model的簡寫，即是瀏覽器物件模型，
BOM由一系列物件組成，是訪問、控制、修改客戶端瀏覽器的屬性的方法，其中代表瀏覽器視窗的window物件是BOM的頂層物件，其他物件都是該物件的子物件，
BOM沒有統一的標準（每種客戶端都可以自定標準）
-
JavaScript語法的標準化組織是ECMA
-
DOM的標準化組織是W3C
-
BOM沒有缺乏標準，BOM最初是Netscape瀏覽器標準的一部分
window物件
window，中文是“視窗”的意思，window物件代表一個瀏覽器或一個框架，window物件會在<body>或<frameset>每次出現時被自動創建，
JavaScript中任何一個全域函式或變數都是window的屬性
window物件除了是BOM中所有物件的父物件外，還包含一些常用屬性、方法，
window.方法和window.屬性就可以訪問了，
存在兼容性的屬性、方法：狀態欄屬性status
過時的屬性、方法：打開新視窗的open()、框架集合物件frames[]、與視窗操作有關的屬性、方法：name、pageXOffset、pageYOffset、moveTo()、moveBy()等
常用的屬性和方法：
alert()：顯示帶有一段資訊和一個確認按鈕的警告框
window.alert("qqq");
alert("111"); //不加window也可以呼叫
confirm()：顯示帶有一段資訊以及確認按鈕和取消按鈕的對話框
if(confirm("您是否要關閉視窗？")){
console.log("是");
}else{
console.log("否");
}
close()：關閉瀏覽器視窗
print()：列印當前視窗的內容
scrollBy()：按照指定的像素值來滾動內容
scrollTo()：把內容滾動到指定的坐標
clearInterval()：取消由setInterval()設定的timeout
clearTimeout()：取消由setTimeout()設定的timeout
setInterval()：按照指定的周期（以毫秒計算）來呼叫函式或計算運算式
setTimeout()：在指定的毫秒數后呼叫函式或計算運算式
setInterval()與setTimeout()的相同與不同：
相同：語法一樣，都是一個周期執行一個函式
不同：setTimeout()只會執行一次，setInterval()按照周期去回圈執行
setTimeout()與setInterval() 相比，編碼要少一些，但做復雜控制時， setTimeout() 的回傳值沒有及時清除會經常造成不可預料的意外，在使用setTimeout()或setInterval() 的時候，一定要注意的他們的回傳值的問題，否則會出現各種例外，
location物件
location物件是屬于window物件的子物件
location物件是由JavaScript runtime engine自動創建的，包含有關當前url資訊
常用屬性：
hash：設定或回傳從#號開始的url
host：設定或回傳主機或當前的url的埠號
hostname：設定或回傳當前的URL主機名
href：設定或回傳完整的URL
pastname：設定或回傳當前URL的路徑部分
port：設定或回傳當前URL的埠號
protocol：設定或回傳當前URL的協議
search：設定或回傳從問號（？）開始的URL（查詢部分）
常用方法：
assign()：加載新的檔案
reload()：重新加載當前檔案
replace()：用新的檔案替代當前檔案
利用自己的服務器測驗了一下，就是有點不太好
history物件
history物件是屬于window物件的子物件
后退、前進
history物件是由JavaScript runtime engine自動創建的，由一系列的url組成，這些url是用戶在一個瀏覽器視窗內已訪問的url
方法：
back()：加載history串列中的上（前）一個URL
forward()：加載history串列中的下一個URL
go()：加載history串列中的某一個具體頁面
navigator物件
判斷瀏覽器版本、瀏覽器兼容性（版本問題）
navigator物件是由JavaScript runtime engine自動創建的，包含有關客戶機瀏覽器的資訊，
常用屬性：
appCodeName：回傳瀏覽器的代碼號
appName：回傳瀏覽器的名稱
appVersion：回傳瀏覽器的平臺和版本資訊
cookieEnabled：回傳指明瀏覽器中是否啟用cookie的布林值
platform：回傳運行瀏覽器的作業系統平臺
userAgent：回傳由客戶機發送服務器的user-agent頭部的值
回話機制：所有的網頁都能訪問到回話里面的資料
screen物件
screen 物件是屬于Window物件的子物件，
screen物件是由 JavaScript runtime engine 自動創建的，含有關客戶機顯示螢屏的資訊，
常用屬性：
availHeight：回傳顯示螢屏的高度（除window任務欄之外）
availWidth：回傳顯示螢屏的寬度（除window任務欄之外）
bufferDepth：設定或回傳在off-screen bitmap buffer中調色板的位元深度
colorDepth：回傳目標設備或緩沖器上的調色板的位元深度
deviceXDPI：回傳顯示螢屏的每英寸水平點數
deviceYDPI：回傳顯示螢屏的每英寸垂直點數
fontSmoothingEnabled：回傳用戶是否在顯示控制面板中啟用了字體平滑
height：回傳顯示螢屏的高度
width：回傳顯示螢屏的寬度
logicalXDPI：回傳顯示螢屏每英寸的水平方向的常規點數
logicalYDPI：回傳顯示螢屏每英寸的垂直方向的常規點數
pixelDepth：回傳顯示螢屏的顏色解析度（位元每像素）
updateInterval：設定或回傳螢屏的重繪率
document物件
document物件是window物件的子物件，
document物件的獨特之處是它是唯一一個既屬于BOM 又屬于DOM的物件，
從BOM角度看，document物件由一系列集合構成，這些集合可以訪問檔案的各個部分，并提供頁面自身的資訊，再有，由于BOM沒有可以指導實作的標準，所以每個瀏覽器實作的document物件都稍有不同，這一節的重點是最常用的功能，
常用屬性：
cookie：設定或回傳與當前檔案有關的所有cookie
domain：回傳當前檔案的域名
referrer：回傳載入當前檔案的檔案的URL
title：回傳當前檔案的標題
URL：回傳當前檔案的URL
常用方法：
getElementById()：回傳對擁有指定 id 的第一物件的參考
getElementsByName()：回傳對擁有指定 名稱 的物件集合
getElementsByTagName()：回傳對擁有指定 標簽名稱 的物件集合
write()：向檔案寫HTML運算式或JavaScript代碼
writeIn()：等同于write()方法，不同的是每個運算式之后加一個換行符
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM的使用</title> <style> .box{ border: 1px solid #e2e2e2; float: left; width: 150px; height: 50px; text-align: center; line-height: 50px; cursor: pointer; margin-left: 80px; } #scoll{ width: 80px; height: 200vh; background-color: palevioletred; font-size: 20px; } #flexd{ position: fixed; bottom: 50px; right: 50px; background-color: purple; width: 80px; height: 80px; cursor: pointer; } </style> </head> <body> <div >打開視窗</div> <div >關閉視窗</div> <div >計時</div> <div >關閉計數器</div> <div id="scoll"> 山有木兮木有枝，心悅君兮君不知， </div> <div id="flexd"></div> <hr> <div >回傳上一層</div> <div >前進</div> <div >前進到第三個</div> <script> let open = document.getElementsByClassName("box"), tscoll = document.getElementById("flexd"), newwindow = null, timer = null; open[0].onclick = function (){ newwindow = window.open("two.html","scrollbars=yes, width=400, height=200"); newwindow.focus(); //focus的作用是使新視窗保持在最前面 } open[1].onclick = function (){ newwindow.close(); } tscoll.onclick = function (){ // window.scrollTo(0,0); //回傳到頂部，x軸，y軸 window.scrollBy(100,100); //按照指定的像素值來滾動內容 } let i = 0; // open[2].onclick = function(){ // timer = window.setInterval(function (){ // open[2].innerHTML = "計時：" + i; // i++; // },1000) // } // open[3].onclick = function(){ // window.clearInterval(timer); // } open[2].onmousemove = function(){ timer = window.setTimeout(function (){ open[2].innerHTML = i; console.log("11"); i++; },1000) } open[3].onclick = function(){ window.clearTimeout(timer); }document.write('<p>回傳從井號 (#) 開始的 URL（錨）:'+window.location.hash+'</p>'); document.write('<p>回傳主機名和當前 URL 的埠號:'+window.location.host+'</p>'); document.write('<p>回傳當前 URL 的主機名:'+window.location.hostname+'</p>'); document.write('<p>回傳完整的 URL:'+window.location.href+'</p>'); document.write('<p>回傳當前 URL 的路徑部分:'+window.location.pathname+'</p>'); document.write('<p>回傳當前 URL 的埠號:'+window.location.port+'</p>'); document.write('<p>回傳當前 URL 的協議:'+window.location.protocol+'</p>'); document.write('<p>回傳從問號 (?) 開始的 URL（查詢部分）:'+window.location.search+'</p>'); document.write('<hr>');
open[4].onclick = function(){ window.history.back(); } open[5].onclick = function(){ window.history.forward(); } open[6].onclick = function(){ window.history.go(3); } document.write('瀏覽器的代碼名:' + window.navigator.appCodeName + '<br/>'); document.write('瀏覽器的名稱:' + window.navigator.appName + '<br/>'); document.write('瀏覽器的平臺和版本資訊:' + window.navigator.appVersion + '<br/>'); document.write('瀏覽器中是否啟用了cookie:' + window.navigator.cookieEnabled + '<br/>'); document.write('運行瀏覽器的作業系統:' + window.navigator.platform + '<br/>'); document.write('user-agent頭部資訊:' + window.navigator.userAgent + '<br/>'); document.write('<hr>');
document.write('<p>螢屏的高度 (除 Windows 任務欄之外):'+window.screen.availHeight+'</p>'); document.write('<p>螢屏的寬度 (除 Windows 任務欄之外):'+window.screen.availWidth+'</p>'); document.write('<p>調色板的位元深度:'+window.screen.colorDepth+'</p>'); document.write('<p>螢屏的高度:'+window.screen.height+'</p>'); document.write('<p>螢屏的寬度:'+window.screen.width+'</p>'); document.write('<hr>');
document.write('<p>當前檔案有關的所有 cookie：' + document.cookie +'</p>'); document.write('<p>當前檔案的域名：' + document.domain +'</p>'); document.write('<p>載入當前檔案的檔案的 URL：' + document.referrer +'</p>'); document.write('<p>當前檔案的標題：' + document.title +'</p>'); document.write('<p>當前檔案的 URL：' + document.URL +'</p>');
</script> </body> </html>
效果：
document物件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31510.html
標籤：JavaScript
上一篇：解決npm install（'proxy' config is set properly. See: 'npm help config'）失敗問題