1.JavaScript-BOM开篇
1.什么是BOM?
DOM就是一套操作HTML标签的API(接口/方法/属性)
BOM就是一套操作浏览器的API(接口/方法/属性)
2.BOM中常见的对象
window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局)
Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录,只能拿到当前的历史记录
Screen: 代表用户的屏幕信息
2.JavaScript-Navigator
// Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
console.log(window. navigator);
var agent = window.navigator.userAgent;
if (/chrome/i.test(agent)) {//agent中是否包含指定的字符串
alert("当前是谷歌浏览器")
}else if (/firefox/i.test(agent)) {
alert("当前是火狐浏览器")
}else if (/msie/i.test(agent)) {
alert("当前是低级IE浏览器")
}else if ("ActiveXObject" in window) {
alert("当前是高级IE浏览器")
}
非常多的方法，请自行搜索
3.JavaScript-Location
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script>
// 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 = "http://www.it666.com";
};
// 重新加载界面
oBtn3.onclick = function () {
window.location.reload();//默认刷新的reload方法不一定会刷新缓存
}
oBtn3.onclick = function () {
window.location.reload(true);//强制刷新：reload方法中写true。会刷新缓存
}
4.JavaScript-History
History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点：由于隐私考虑，我们并不能拿到用户所有的历史记录，只能拿到当前的历史记录
1.前进
方法一：window.history.forward();
只能在前进过一次后使用
方法二： window.history.go(1);
可以前进多个页面
2.刷新
如果给go方法传递0，就代表刷新。window.history.go(0);
3.后退
方法一：window.history.back();
只能在后退过一次后使用
方法二： window.history.go(1);
可以后退多个页面
5.JavaScript-offsetWidthHeight获取元素宽高
获取元素的宽高
方法一： getComputedStyle()
注意点：
通过getComputedStyle()获取的宽高，不包括padding（内边距）和border（边框）。
即可以获取行内设置的宽高，也可以获取CSS设置的宽高
只支持获取，不支持设置
只支持IE9及以上浏览器
// oDiv.style.width = "555px";
// oDiv.style.height = "555px";//可以获取JS设置的宽高
var style = getComputedStyle(oDiv);
// style.width = "666px";
// style.height = "666px";// property is read-only.不支持设置
console.log(style.width, style.height);
方法二：通过currentStyle属性获取宽高
注意点：
通过currentStyle获取的宽高，不包括padding（内边距）和border（边框）。
可以获取行内设置的宽高，也可以获取CSS设置的宽高
只支持获取，不支持设置
只支持IE9以下浏览器
// oDiv.style.width = "555px";
// oDiv.style.height = "555px";
style.width = "666px";
style.height = "666px";
var style = oDiv.currentStyle;
// console.log(style);
console.log(style.width);
console.log(style.height);
方法三：通过style属性获取宽高
通过style获取的宽高，不包括padding（内边距）和border（边框）。
可以获取行内设置的宽高，不可以获取CSS设置的宽高
支持获取，支持设置
支持高级低级浏览器
oDiv.style.width = "555px";
oDiv.style.height = "555px";
console.log(oDiv.style.width, oDiv.style.height);
方法四：通过offsetWidth/offsetHeight属性获取宽高
通过offsetWidth/offsetHeight获取的宽高，包括padding（内边距）和border（边框）。
可以获取行内设置的宽高，不可以获取CSS设置的宽高
支持获取，不支持设置
支持高级低级浏览器
oDiv.offsetWidth = "555px";
oDiv.offsetHeight = "555px";
console.log(oDiv.offsetWidth);
console.log(oDiv.offsetHeight);
总结：
1.getComputedStyle()、currentStyle、style
获取的宽高，不包括padding（内边距）和border（边框）。
2.offsetWidth/offsetHeight
获取的宽高，包括padding（内边距）和border（边框）。
3..getComputedStyle()、currentStyle、offsetWidth/offsetHeight
支持获取，不支持设置
4.style
支持获取，支持设置
5..getComputedStyle()、currentStyle、offsetWidth/offsetHeight
可以获取行内，也可以获取外链和内联样式
6.style
只能获取行内样式
6.JavaScript-offsetLeftTop获取元素位置
offsetLeft和offsetTop作用
获取元素到第一个定位祖先元素之间的偏移位
如果没有祖先元素是定位的，那么就是获取到body的偏移位
7.JavaScript-offsetParent
1.offsetParent作用
获取元素的第一个定位祖先元素
如果没有祖先元素是定位的，那么获取到的就是body
8.JavaScript-client相关属性
clientWidth = 宽度 + 内边距
clientHeight = 高度 + 内边距
offsetWidth = 宽度 + 内边距 + 边框
offsetHeight = 高度 + 内边距 + 边框
clientLeft = 左边框
clientTop = 顶边框
offsetLeft/offsetTop：距离第一个定位祖先元素偏移位 || body
9.JavaScript-scroll相关属性
1.内容没有超出元素范围时
scrollWidth = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight = 元素高度 + 内边距高度 == clientHeight
2.内容超出元素范围时
scrollWidth = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight = 元素高度 + 内边距高度 + 超出的高度
3.scrollTop / scrollLeft
scrollTop:超出元素内边距顶部的距离
scrollLeft: 超出元素内边距左边的距离
JavaScript-三大家族
三大家族：offset、client、scroll
23.JavaScript-函数防抖
问题：在百度输入框内，输入一个字符就会发送一次请求，会产生性能问题
解决办法：通过定时期判断用户是不是连续输入。使用定时期
1.什么是函数防抖（debounce）？
函数防抖是优化高频率执行js代码的一种手段
可以让被调用的函数在一次连续的高频操作过程中只被调用一次
2.函数防抖的作用
减少代码执行次数，提升网页性能
3.函数防抖应用场景
oninput / onmousemove / onscroll / onresize操作
4.函数防抖存在问题：
只被调用一次，因此看不到变化过程，只能看到最终结果
解决办法：使用函数节流
<input type="text">
<script>
let oInput = document.querySelector("input");
let timerId = null;
oInput.oninput = function () {//监听内容是否发生变化
let value = this.value
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
console.log(value, "发送网络请求");
}, 1000);
// console.log(this.value, "发送网络请求");
}
</script>
4.函数防抖的封装
function debounce() {//只要调用debounce函数，就返回防抖的函数
let timerId = null;
return function () {
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
console.log(value, "发送网络请求");
}, 1000);
}
}
oInput.oninput = debounce();
24.JavaScript-函数节流
1.什么是函数节流（throttle）？
函数节流也是优化高频率执行js代码的一种手段
可以减少高频调用函数的执行次数
2.函数节流作用
减少代码执行次数，提升网页性能
3.函数节流应用场景
oninput / onmousemove / onscroll / onresize等事件
4.函数节流和函数防抖的区别
函数节流是减少连续的高频操作函数执行次数（例如连续调用10次，可能只执行3~4次）
函数防抖是让连续的高频操作时函数只执行一次（例如连续调用10次，只执行1次）