BOM详解（整个BOM架构体系）
**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代表用户正在使用的浏览器。
效果：
3：Location
课程目标：
了解怎么使用Location。
形式：
window.location.属性；
代表一种功能。比如获取 设置功能之类的.
1获取
1.1代码：
1.2效果：
2设置
2.1代码：
2.2效果：
3刷新
3.1代码：
3.2效果：
4强制刷新:
4.1代码
4.2效果：
源代码：
<!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://www.it666.com";
}//刷新
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
2.html
总结:
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以上才支持
效果：
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的宽高.
效果：
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：只能获取行内的.
效果：
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高级低级浏览器都支持
效果：
大总结：
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>
总结：
1：offsetLeft/Top为元素边框外侧到父元素边框内侧的距离
效果：
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:获取的是标签.
效果：
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
效果：
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**
指的是滚动条相对于其顶部的偏移。
效果：
