BOM
什么是BOM
- DOM就是一套操作HTML标签的API(接口/方法/属性)
- BOM就是一套操作浏览器的API(接口/方法/属性)
BOM中常用对象
- window: 代表整个浏览器窗口
注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局) - Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
- Location: 代表浏览器地址栏的信息, 通过Location我们就能设置或者获取当前地址信息
- History: 代表浏览器的历史信息, 通过History来实现刷新/上一步/下一步
注意点: 出于隐私考虑, 我们并不能拿到用户所有的历史记录, 只能拿到当前的历史记录 - Screen: 代表用户的屏幕信息
navigator示例
<script>
// console.log(window.navigator);
let agent = window.navigator.userAgent;
if (/chrom/i.test(agent)){
alert("当前是谷歌浏览器");
}else if (/firefox/i.test(agent)){
alert("当前是火狐浏览器");
}else if (/msie/i.test(agent)){
alert("当前是低级IE浏览器");
}else if ("ActiveXObject" in window){
alert("当前是高级IE浏览器");
}
</script>
location示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script>
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 () {
console.log(window.location.href = "https://www.baidu.com/");
};
// 重新加载界面
oBtn3.onclick = function () {
window.location.reload();
};
// 强制重新加载界面
oBtn4.onclick = function () {
window.location.reload(true);
};
</script>
</body>
</html>
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.back(); // 后退
// window.history.go(1); // 前进
window.history.go(-1); // 后退
}
// 刷新
// 如果给go方法传递0, 就代表刷新
oBtn2.onclick = function () {
window.history.go(0);
}
JavaScript获取元素宽高方式
通过getComputedStyle获取宽高
- 获取的宽高不包括边框和内边距
- 既可以获取行内设置的宽高也可以获取CSS设置的宽高
- 只支持获取, 不支持设置
- 只支持IE9及以上浏览器
通过currentStyle属性获取宽高
- 获取的宽高不包括边框和内边距
- 既可以获取行内设置的宽高也可以获取CSS设置的宽高
- 只支持获取, 不支持设置
- 只支持IE9及以下浏览器
通过style属性获取宽高
- 获取的宽高不包括边框和内边距
- 只能获取行内设置的宽高, 不能获取CSS设置的宽高
- 可以获取也可以设置
- 高级低级浏览器都支持
通过offsetWidth和offsetHeight获取
- 获取的宽高包含边框、内边距及元素宽高
- 既可以获取行内设置的宽高也可以获取CSS设置的宽高
- 只支持获取, 不支持设置
- 高级低级浏览器都支持
JavaScript获取元素位置方式
offsetLeft与offsetTop
- 获取元素到第一个定位祖先元素之间的偏移位
- 如果没有祖先元素是定位的, 那么就是获取到
body的偏移位
offsetParent
- 获取元素的第一个定位祖先元素
- 如果没有祖先元素是定位的, 那么就是获取到的就是
body
clientWidth与clientHeight
clientWidth = 宽度 + 左内边距 + 右内边距
clientHeight = 高度 + 上内边距 + 下内边距
clientLeft与clientTop
获取元素的左边框和顶部边框
scrollWidth与scrollHeight
内容没有超出元素范围时
scrollWidth = 元素宽度 + 内边距 = clientWidth
scrollHeight = 元素高度 + 内边距 = clientHeight
内容超出元素范围时
scrollWidth = 元素宽度 + 左右内边距宽度 + 超出的宽度
scrollHeight = 元素高度 + 上下内边距的高度 + 超出的高度
三大家族.PNG
获取网页可视区域宽高
-
innerWidth / innerHeight只能在IE9以及IE9以上的浏览器中才能获取 -
documentElement.clientWidth / documentElement.clientHeight可以用于在IE9以下的浏览器的标准模式中获取,默认情况下都是以标准模式来进行渲染的(CSS1Compat) - 如果网页没有书写文档声明,那么就会按照"混杂模式/怪异模式"来进行渲染的(BackCompat),混杂模式中利用如下的方式获取可视区域的宽高
document.body.clientWidth / document.body.clientHeight
// 获取网页宽高兼容性写法
function getScreen() {
let width = null, height = null;
// IE9及以上高级浏览器
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
}
}
网页滚动距离
window.onscroll = function () {
// 1.IE9以及IE9以上的浏览器
// console.log(window.pageXOffset);
// console.log(window.pageYOffset);
// 2.标准模式下浏览器
// console.log(document.documentElement.scrollTop);
// console.log(document.documentElement.scrollLeft);
// 3.混杂(怪异)模式下浏览器
// console.log(document.body.scrollTop);
// console.log(document.body.scrollLeft);
let {x, y} = getPageScroll();
console.log(x, y);
function getPageScroll() {
let x, y;
// IE9以及IE9以上的浏览器
if(window.pageXOffset){
x = window.pageXOffset;
y = window.pageYOffset;
// 标准模式下浏览器
}else if(document.compatMode === "BackCompat"){
x = document.body.scrollLeft;
y = document.body.scrollTop;
}else{
// 混杂(怪异)模式下浏览器
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return {
x: x,
y: y
}
}
}
函数防抖与函数防抖
函数防抖
- 函数防抖是优化高频率执行js代码的一种手段，可以让被调用的函数在一次连续的高频操作过程中只被调用一次
- 减少代码执行次数, 提升网页性能
- 函数防抖应用场景：
oninput / onmousemove / onscroll / onresize等事件
函数节流
- 函数节流也是优化高频率执行js代码的一种手段可以减少高频调用函数的执行次数
- 减少代码执行次数, 提升网页性能
函数节流和函数防抖区别
- 函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能 只执行3-4次)
- 函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)
网友评论