JavaScript基础知识(BOM)
feifan 1/30/2021 JavaScript
# BOM简介
/*
1.什么是BOM?
DOM就是一套操作HTML标签的API(接口/方法/属性)
BOM就是一套操作浏览器的API(接口/方法/属性)
2.BOM中常见的对象
window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
Screen: 代表用户的屏幕信息
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Navigator
// Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
// userAgent
// console.log(window.navigator);
var agent = window.navigator.userAgent;
if (/chrome/i.test(agent)) {
alert("chrome");
} else if (/firefox/i.test(agent)) {
alert("firefox");
} else if (/msie/i.test(agent)) {
alert("ie");
} else if ("ActiveXObject" in window) {
alert("高级ie");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Location
// Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
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 = "https://www.baidu.com";
}
//重新加载界面
oBtn3.onclick = function () {
window.location.reload();
}
oBtn4.onclick = function () {
window.location.reload(true);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# History
// History: 代表浏览器的历史信息, 通过History来实现刷新/前进/后退
// 注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
// 前进
/*
注意点:
只有当前访问过其它的界面, 才能通过forward/go方法前进
如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
*/
oBtn1.onclick = function () {
// window.history.forward();
window.history.go(1);
}
// 刷新
// 如果给go方法传递0, 就代表刷新
oBtn2.onclick = function () {
window.history.go(0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 获取元素宽高其它方式
/*
1.通过getComputedStyle获取宽高
1.1获取的宽高不包括 边框和内边距
1.2即可以获取行 设置的宽高也可以获取CSS设置的宽高
1.3只支持获取, 不支持设置
1.4只支持IE9及以上浏览器
*/
var oDiv = document.getElementById("box");
// oDiv.style.width = "166px";
// oDiv.style.height = "166px";
var style = getComputedStyle(oDiv);
// style.width = "166px";
// style.height = "166px";
console.log(style.width);
console.log(style.height);
/*
2.通过currentStyle属性获取宽高
2.1获取的宽高不包括 边框和内边距
2.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
2.3只支持获取, 不支持设置
2.4只支持IE9以下浏览器
*/
var oDiv = document.getElementById("box");
// oDiv.style.width = "166px";
// oDiv.style.height = "166px";
var style = oDiv.currentStyle;
style.width = "166px";
style.height = "166px";
// console.log(style);
console.log(style.width);
console.log(style.height);
/*
3.通过style属性获取宽高
3.1获取的宽高不包括 边框和内边距
3.2只能获取内设置的宽高, 不能获取CSS设置的宽高
3.3可以获取也可以设置
3.4高级低级浏览器都支持
*/
var oDiv = document.getElementById("box");
oDiv.style.width = "166px";
oDiv.style.height = "166px";
console.log(oDiv.style.width);
console.log(oDiv.style.height);
/*
4.offsetWidth和offsetHeight
4.1获取的宽高包含 边框 + 内边距 + 元素宽高
4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高
4.3只支持获取, 不支持设置
4.4高级低级浏览器都支持
*/
var oDiv = document.getElementById("box");
// oDiv.offsetWidth = "166px";
// oDiv.offsetHeight = "166px";
oDiv.style.width = "166px";
oDiv.style.height = "166px";
console.log(oDiv.offsetWidth);
console.log(oDiv.offsetHeight);
/*
1.getComputedStyle/currentStyle/style
获取的宽高不包括 边框和内边距
2.offsetWidth/offsetHeight
获取的宽高包括 边框和内边距
3.getComputedStyle/currentStyle/offsetXXX
只支持获取, 不支持设置
4.style
可以获取, 也可以设置
5.getComputedStyle/currentStyle/offsetXXX
即可以获取行内,也可以获取外链和内联样式
6.style
只能获取行内样式
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
# 获取元素位置其他方式
offsetLeft和offsetTop作用
获取元素到第一个定位祖先元素之间的偏移位
如果没有祖先元素是定位的, 那么就是获取到body的偏移位
offsetParent作用
获取元素的第一个定位祖先元素
如果没有祖先元素是定位的, 那么就是获取到的就是body
1
2
3
4
5
6
7
2
3
4
5
6
7
# client属性
1.offsetWidth = 宽度 + 内边距 + 边框
offsetHeight = 高度 + 内边距 + 边框
2.clientWidth = 宽度 + 内边距
clientHeight = 高度 + 内边距
1.offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body
2.clientLeft/clientTop: 左边框 和 顶部边框
1
2
3
4
5
6
7
2
3
4
5
6
7
# scroll属性
/*
1.内容没有超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
*/
let oDiv = document.querySelector("div");
// console.log(oDiv.scrollWidth);
// console.log(oDiv.scrollHeight);
/*
2.内容超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
*/
/*
3.scrollTop / scrollLeft
scrollTop: 超出元素内边距顶部的距离
scrollLeft: 超出元素内边距左边的距离
*/
// console.log(oDiv.scrollTop);
oDiv.onscroll = function () {
console.log(oDiv.scrollTop);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 获取网页宽高
// innerWidth/innerHeight ie9+支持
console.log(window.innerWidth);
console.log(window.innerHeight);
// 注意点: documentElement.clientWidth/documentElement.clientHeight
// 可以用于在IE9以下的浏览器的标准模式中获取
// 浏览器在渲染网页的时候有两种模式"标准模式"/"混杂模式/怪异模式"
// 默认情况下都是以标准模式来进行渲染的(CSS1Compat)
// 如果网页没有书写文档声明, 那么就会按照"混杂模式/怪异模式"来进行渲染的(BackCompat)
// documentElement --> HTML --> 整个网页
// console.log(document.documentElement);
// console.log(document.documentElement.clientWidth);
// console.log(document.documentElement.clientHeight);
// 注意点: 在混杂模式中利用如下的方式获取可视区域的宽高
// console.log(document.compatMode);// CSS1Compat
console.log(document.body.clientWidth);
console.log(document.body.clientHeight);
let {width, height} = getScreen();
console.log(width);
console.log(height);
function getScreen() {
let width, height;
if(window.innerWidth){
width = window.innerWidth;
height = window.innerHeight;
}else if(document.compatMode === "BackCompat"){
width = document.body.clientWidth;
height = document.body.clientHeight;
}else{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 函数防抖
/*
1.什么是函数防抖[debounce]?
函数防抖是优化高频率执行js代码的一种手段
可以让被调用的函数在一次连续的高频操作过程中只被调用一次
2.函数防抖作用
减少代码执行次数, 提升网页性能
3.函数防抖应用场景
oninput / onmousemove / onscroll / onresize等事件
*
let oInput = document.querySelector("input");
let timeId = null;
oInput.oninput = function () {
// console.log(this.value);
timeId && clearInterval(timeId);
timeId = setTimeout(function () {
console.log("发送请求")
}, 1000);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 函数节流
/*
1.什么是函数节流[throttle]?
函数节流也是优化高频率执行js代码的一种手段
可以减少高频调用函数的执行次数
2.函数节流作用
减少代码执行次数, 提升网页性能
3.函数节流应用场景
oninput / onmousemove / onscroll / onresize等事件
4.函数节流和函数防抖区别
函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)
函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)
*/
let oDiv = document.querySelector("div");
function resetSize(){
let {width, height} = getScreen();
oDiv.style.width = width / 2 + "px";
oDiv.style.height = height / 2 + "px";
}
resetSize();
// 监听可视区域尺寸的变化
/*
window.onresize = debounce(function () {
resetSize();
console.log("尺寸的变化");
}, 1000);
*/
let timerId = null;
let flag = true;
window.onresize = function () {
if(!flag){ // if(false) if(true) if(false)
return;
}
flag = false;
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
flag = true;
resetSize();
console.log("尺寸的变化");
}, 500);
// resetSize();
// console.log("尺寸的变化");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45