主要內容：
前情提要： 何謂BOM?
所謂 BOM 指的就是瀏覽器對象模型 Browser Object Model，它的核心就是瀏覽器。
一、BOM輸出
主要輸出方式有以下幾種：
二、BOM的對象
1、open和close方法 --- 打開和關閉網頁的幾種方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open_close方法</title>
</head>
<body>
<!--open打開方法-->
<button onclick="window.open('https://www.cnblogs.com/schut/')">暮光微涼</button>
<button onclick="openHtml()">點擊打開</button>
<button>打開博客</button>
<!--close關閉方法,不需要參數，直接關閉當前網頁-->
<button onclick="window.close()">關閉頁面</button>
<button>關閉頁面</button>
</body>
<script type="text/javascript">
// open方法
function openHtml(){ window.open("https://www.cnblogs.com/schut/") } var openBtn = document.getElementsByTagName('button')[2]; openBtn.onclick = function(){ // open('https://www.cnblogs.com/schut/') // 此處window可省略
open('about:blank',"_self") // 打開一個空頁面
} // close方法
var closeBtn = document.getElementsByTagName('button')[4]; closeBtn.onclick = function(){ if(confirm('是否確認關閉？')){ close(); } } </script>
</html>
2、BOM的其他對象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM的其他對象</title>
</head>
<body>
</body>
<script type="text/javascript">
// 返回瀏覽器的用戶設備信息
console.log(window.navigator.userAgent); // location方法
console.log(window.location); window.location.href = 'https://www.cnblogs.com/schut/'; //全局刷新（盡量少用） ===》 局部刷新 // window.location.reload(); // 不間斷全局刷新
setTimeout(function(){ window.location.reload(); },3000) // 每隔3秒刷新一次
</script>
</html>
三、client的相關屬性
1、client的相關屬性有如下幾個：
clientTop 上邊框的高度
clientLeft 左側邊框的寬度
clientWidth 內容區域+左右padding（即可視寬度）
clientHeight 內容區域+上下padding（即可視高度）
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client相關屬性解讀</title>
<style type="text/css"> *{ padding:0; margin:0;
} .box{ width:200px; height:150px; margin:30px 10px; position:absolute; border:5px solid royalblue; padding:10px 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
var Box = document.getElementsByClassName('box')[0]; console.log(Box.clientTop) // 5 對應上邊框的高度
console.log(Box.clientLeft) // 5 對應左側邊框的寬度
console.log(Box.clientWidth) // 240 內容區域+左右padding 可視寬度
console.log(Box.clientHeight) // 170 內容區域+上下padding 可視高度
</script>
</html>
2、屏幕的可視區域
注意：此處的屏幕可視區域指的是瀏覽器中頁面內容的可視區。
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕的可視區域</title>
</head>
<body>
</body>
<script type="text/javascript"> window.onload = function () { // onload表示加載
console.log("屏幕可視寬度：",document.documentElement.clientWidth); console.log("屏幕可視高度：",document.documentElement.clientHeight); } window.onresize = function () { // 實時顯示屏幕可視區域大小
console.log("屏幕實時可視寬度：",document.documentElement.clientWidth); console.log("屏幕實時可視高度：",document.documentElement.clientHeight); } </script>
</html>
四、offset的相關屬性
offset的相關屬性有以下幾個：
offsetTop :如果盒子沒有設置定位，到瀏覽器的頂部距離；設置定位后，以父盒子的位置為基准
offsetLeft :如果盒子沒有設置定位，到瀏覽器的左部距離；設置定位后，以父盒子的位置為基准
offsetWidth:內容+padding+border
offsetHeight:內容+padding+border
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset系列</title>
<style type="text/css"> #box1{ position:relative; // 設置定位 background-color: #b3d7ff;
} #box2{ width:200px; height:200px; border:1px solid green; padding:10px; margin:10px; position:absolute; // 設置定位 background-color: #b1dfbb;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box2'); console.log(box.offsetTop); // 未設置定位：10 設置定位后 ：10
console.log(box.offsetLeft); // 未設置定位：18 設置定位后 ：10
console.log(box.offsetWidth);// 未設置定位：222 設置定位后 ：222
console.log(box.offsetHeight);// 未設置定位：222 設置定位后 ：222
} </script>
</html>
五、scroll相關屬性
scroll 的相關屬性有以下幾個：
scrollTop 距離瀏覽器內容區頂端的距離
scrollLeft 距離瀏覽器內容區左端的距離
scrollWidth 內容的寬度+padding(注意：不包含邊框)
scrollHeight 內容的高度+padding(注意：不包含邊框)
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style type="text/css"> *{ padding:0; margin:0;
}
</style>
</head>
<body>
<div style="width:100%;height:1200px;">
<div style="height:200px;background-color: palevioletred;"></div>
<div style="height:200px;background-color: orange;"></div>
<div style="height:200px;background-color: gold;"></div>
<div style="height:200px;background-color: greenyellow;"></div>
<div style="height:200px;background-color: cornflowerblue;"></div>
<div id='scroll' style="height:150px;width:300px;border:3px solid mediumspringgreen;overflow: auto">
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
<p>我是一個小標簽</p>
</div>
</div>
</body>
<script type="text/javascript"> window.onload = function(){ // 實施監聽滾動事件
window.onscroll= function(){ // 瀏覽器頁面的滾動監聽
console.log('------------------------------------'); console.log("上"+document.documentElement.scrollTop); console.log("左"+document.documentElement.scrollLeft); console.log("寬"+document.documentElement.scrollWidth); console.log("高"+document.documentElement.scrollHeight); } // 盒子內容滾動監聽
var s = document.getElementById('scroll'); s.onscroll = function(){ // scrollHeight:內容的高度+padding（注意：不包含邊框）
console.log('----------------------'); console.log('上'+s.scrollTop); console.log('左'+s.scrollLeft); console.log('寬'+s.scrollWidth); console.log('高'+s.scrollHeight); } } </script>
</html>