**BOM最详解： **

课程目标：

了解：

1.BOM架构全局对象的使用.

2.根据案例来讲解

3：大总结。

4;效果.

1.什么是BOM？

和浏览器进行交互的对象架构就是BOM.

2.Navigator

课程目标：

了解怎么使用Navigator。

形式：

window.navigator.属性。代表获取浏览器的各种信息。

作用; // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var agent=window.navigator.userAgent;
if(/chrome/i.test(agent))
    {
alert("当前浏览器谷歌");
    }
else if(/firefox/i.test(agent))
    {
alert("当前浏览器火狐");
    }
else if(/msie/i.test(agent))
    {
alert("当前浏览器低级ie");
    }
</script>
</body>
</html>

总结:

1:test()函数里面的内容是否与某个模式/内容/匹配.

2:window.navigator.userAgent代表用户正在使用的浏览器。

效果：

BOM详解（整个BOM架构体系）_javascript

3：Location

课程目标：

了解怎么使用Location。

形式：

window.location.属性；

代表一种功能。比如获取 设置功能之类的.

1获取

1.1代码：

BOM详解（整个BOM架构体系）_宽高_02

1.2效果：

BOM详解（整个BOM架构体系）_内边距_03

2设置

2.1代码：

BOM详解（整个BOM架构体系）_css_04

2.2效果：

BOM详解（整个BOM架构体系）_javascript_05

3刷新

3.1代码：

BOM详解（整个BOM架构体系）_宽高_06

3.2效果：

BOM详解（整个BOM架构体系）_javascript_07

4强制刷新:

4.1代码

BOM详解（整个BOM架构体系）_宽高_08

4.2效果：

BOM详解（整个BOM架构体系）_宽高_09

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script type="text/javascript">
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
let oBtn3 = document.querySelector("#btn3");
let oBtn4 = document.querySelector("#btn4");
//获取
oBtn1.onclick=function()
    {
console.log(window.location.href);
    }
//设置
oBtn2.onclick=function()
    {
window.location.href="http://";
    }//刷新
oBtn3.onclick=function()
    {
window.location.reload();
    }
//强制刷新
oBtn4.onclick=function()
    {
window.location.reload(true);
    }
</script>
</body>
</html>

5.History（两个页面）

课程目标：

了解怎么使用 History

形式：

window.history.属性.

代表种功能;前进 后退…

作用：浏览器的历史信息, 通过History来实现刷新/前进/后退

源代码：

1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>我是第一个界面</h1>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="./2.html">新的界面222</a>
<script type="text/javascript">
let a=document.querySelector("#btn1");
let b=document.querySelector("#btn2");
//点击去下一个页面.
a.onclick=function()
 {
// 相同作用window.history.forward();
window.history.go(1);
 }
//点击刷新
b.onclick=function()
 {
//如果给go方法传递0, 就代表刷新
window.history.go(0);
 }
</script>
</body>
</html>

2.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是第2222个页面</h2>
<button id="btn1">后退</button>
<script type="text/javascript">
let c=document.querySelector("#btn1");
//点击去上一个页面
c.onclick=function()
    {
window.history.go(-1);
//相同作用：window.history.back();
    }
</script>
</body>
</html>

效果：1.html

BOM详解（整个BOM架构体系）_css_10

2.html

BOM详解（整个BOM架构体系）_html_11

总结:

history：代表页面的切换.

6：通过getComputedStyle来获取宽高

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
    {
width: 400px;
height: 400px;
background: url(./images/ad1.jpg);
padding: 50px;
border: 5px dashed blue;
background-clip: content-box;
    }
</style>
</head>
<body>
<div id="box" style="width: 500px"></div>
<script type="text/javascript">
var q=document.getElementById("box");
var style=getComputedStyle(q);
console.log(style.width);
console.log(style.height);

</script>
</body>
</html>

总结;

1:getComputedStyle只获取content的宽高.

2:只是获取.

3:行内的 css的设置的宽高。

4：ie9以上才支持

效果：

BOM详解（整个BOM架构体系）_html_12

7:通过currentStyle属性获取宽高

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
    {
width: 400px;
height: 400px;
background: url(./images/ad1.jpg);
padding: 50px;
border: 5px dashed blue;
background-clip: content-box;
    }
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var q=document.getElementById("box");
var style1=q.currentStyle;
console.log(style1.height);
console.log(style1.width);

</script>
</body>
</html>

总结：

1：IE9及以上才支持.

2:只是获取.

3:行内的 css的设置的宽高。

4:1:getComputedStyle只获取content的宽高.

效果：

BOM详解（整个BOM架构体系）_css_13

8.通过style属性获取宽高

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
    {
width: 400px;
height: 400px;
background: url(./images/ad1.jpg);
padding: 50px;
border: 5px dashed blue;
background-clip: content-box;
    }
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var q=document.getElementById("box");
q.style.width="300px";
q.style.height="400px";
console.log(q.style.width);
console.log(q.style.height);

</script>
</body>
</html>

总结：

1：支持获取+设置

2：兼容所有的浏览器

3：只能获取行内的.

效果：

BOM详解（整个BOM架构体系）_内边距_14

9.offsetWidth和offsetHeight

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div
    {
width: 400px;
height: 400px;
background: url(./images/ad1.jpg);
padding: 50px;
border: 5px dashed blue;
background-clip: content-box;
    }
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var q=document.getElementById("box");
console.log(q.offsetWidth);
console.log(q.offsetHeight);
</script>
</body>
</html>

总结：

4.1获取的宽高包含 边框 + 内边距 + 元素宽高

4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高

4.3只支持获取, 不支持设置

4.4高级低级浏览器都支持

效果：

BOM详解（整个BOM架构体系）_内边距_15

大总结：

1.getComputedStyle/currentStyle/style
获取的宽高不包括 边框和内边距
2.offsetWidth/offsetHeight
获取的宽高包括 边框和内边距
3.getComputedStyle/currentStyle/offsetXXX
只支持获取, 不支持设置
4.style
可以获取, 也可以设置
5.getComputedStyle/currentStyle/offsetXXX
即可以获取行内,也可以获取外链和内联样式
6.style
只能获取行内样式

10：获取标签位置的方式

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
        }
#father{
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
background: blue;
overflow: hidden;
position: relative;
        }
#son{
width: 100px;
height: 100px;
margin-top: 100px;
margin-left: 100px;
background: red;
        }
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
var q=document.getElementById("son");
q.onclick=function()
        {
console.log(q.offsetLeft);
console.log(q.offsetTop);
        }

</script>
</body>
</html>

总结：

BOM详解（整个BOM架构体系）_html_16

1：offsetLeft/Top为元素边框外侧到父元素边框内侧的距离

效果：

BOM详解（整个BOM架构体系）_css_17

11.offsetParent

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
        }
        .grand-father{
width: 300px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
background: deeppink;
overflow: hidden;
position: relative;
        }
        .father{
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
background: blue;
overflow: hidden;
position: relative;
        }
        .son{
width: 100px;
height: 100px;
margin-top: 100px;
margin-left: 100px;
background: red;
        }
</style>
</head>
<body>
<div class="grand-father">
<div class="father">
<div class="son"></div>
</div>
</div>
<script type="text/javascript">
let oSDiv = document.querySelector(".son");
oSDiv.onclick = function () {
console.log(oSDiv.offsetParent);
    }
</script>
</body>
</html>

总结：

1:找祖先元素是定位的，如果都没有，body.

2:获取的是标签.

效果：

BOM详解（整个BOM架构体系）_css_18

12.client

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
        }
div{
width: 100px;
height: 100px;
padding: 50px;
border: 50px solid #000;
background: red;
background-clip: content-box;/*内容外的裁减掉.*/
        }
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
let oDiv = document.querySelector("div");
console.log(oDiv.clientWidth);
console.log(oDiv.clientHeight);
console.log(oDiv.clientLeft);
console.log(oDiv.clientTop);
</script>
</body>
</html>

总结：

1：clientLeft/clientTop: 相当于border-left/top的值

2：宽度/高度+padding

效果：

BOM详解（整个BOM架构体系）_html_19

13.scroll属性:

源代码;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
        }
div{
width: 100px;
height: 100px;
padding: 50px;
border: 50px solid #000;
background: red;
background-clip: content-box;
color: deepskyblue;
overflow: auto;
        }
</style>
</head>
<body>
<div id="box">
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
我是内容<br/>
</div>
<script type="text/javascript">
let oDiv = document.querySelector("div");
console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
oDiv.onscroll = function () {
console.log("oDiv.scrollTop="+oDiv.scrollTop);
    }
</script>
</body>
</html>

总结：

**1.内容没有超出元素范围时**
*scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight*

 **2.内容超出元素范围时**
*scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度*


**3.scrollTop / scrollLeft**

指的是滚动条相对于其顶部的偏移。

效果：

BOM详解（整个BOM架构体系）_javascript_20