JavaScript-BOM学习归纳总结

最新推荐文章于 2024-05-01 09:00:00 发布

原创最新推荐文章于 2024-05-01 09:00:00 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bom

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文是JavaScript BOM学习的归纳总结，详细介绍了window对象、延时器与定时器、location对象、navigator对象、history对象、screen对象、offset系列、scroll系列、client系列以及getComputedStyle方法的使用和功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript-BOM学习归纳总结

现在所说的JavaScript包含了三个部分

ECMAScript：js的语法规范
DOM：操作网页的功能
BOM：操作浏览器的功能

BOM（Browser Object Model，浏览器对象模型）

1.window对象

window对象是js中的全局变量，也叫做顶级对象
常见的window对象：
① document alert
② 全局中的变量，函数
③ BOM的属性和方法

（1）入口函数（window.onload = function(){}）
当页面加载完成的时候来执行这个函数，这个功能叫做入口函数
注意点：
① 不仅需要页面加载完成，还需要等待外部资源（img，css，js）加载完成；
② 存在覆盖问题

window.onload = function(){
	var box = docunment.querySelector('#box');
	box.onclick = function(){
		alert(1);
	}
}

（2）window.open 与window.close
作用：第三方登录会用到

窗口打开语法：window.open(url, name, desc)
参数：
① url：需要打开网页的网址
② name：页面窗口名称，可选的（可通过window.name去获取页面的名称）
③ desc：设置打开的网页的特征，可选的（写法：‘width=xx,heigth=**xx’）
关闭窗口：window.close()

btn1.onclick = function(){
	newWin = window.open('http://www.baidu.com', 'demo', 'width=300,height=300,left=100,top=100')
}
btn2.onclick = function(){
	// window.close();	// 关闭当前
	newWin.close();		// 窗口调用close方法，关闭窗口
}

2.延时器

语法：setTimeout(function(){}, delay)
参数：
① function(){} 需要延迟执行的函数
② delay：延时的时间，单位为ms
返回值：返回延时器的id，用于后面清除延时器

// 第一种写法
setTimeout(fn, 3000);
// 第二种写法
setTimeout(function(){fn();}, 3000);

清除延时器：
语法：clearTimeout(timerid);
参数：timerid 延时器的id

3.定时器：会不停地去执行（在相同时间间隔）

语法：setInterval(func, interval);
参数：
① func：需要执行的函数
② interval：间隔的时间，单位是ms
返回值：定时器的id

var id = setInterval(fn, 1000);

清除定时器：
语法：clearInterval(timerid);
参数：timerid 定时器的id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>电子表</title>
</head>
<body>
<div id="box"></div>
<script>

  //把时间显示到box中
  var box = document.querySelector("#box");

  function setTime() {
    var date = new Date();
    box.innerText = date.toLocaleString();
  }
  setTime();//手动调用一次
  setInterval(setTime, 1000);
</script>
</body>
</html>

4.location对象

location.href：控制地址栏中的地址
location.reload：让页面重新加载

其它：
location.hash：哈希值，就是锚点
location.host：主机名称（服务器名）+端口号
location.search：参数（问号 ? 之后的部分）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
</head>

<body>
    <a id="link" href="http://www.baidu.com">注册成功，3秒后跳转到首页</a>
    <script>
        // 1. 找对象
        // 2. 开启定时器
        // 3. 修改a链接的内容
        // 4. 倒计时结束了，跳转到href属性值
        
        // 1.
        var link = document.querySelector("#link");
        var count = 3;
        // 2.
        setInterval(function(){
            count--;
            // 3.
            link.innerText = "注册成功，"+ count +"秒后跳转到首页";
            // 4.
            if(count == 0){
                location.href = link.href;
            }
        }, 1000)
    </script>
</body>
</html>

5.navigator对象

获取客户端（浏览器）的一些信息
window.navigator == navigator
navigator.userAgent：浏览器版本

6.history对象

（1）前进：history.forward()
（2）后退：history.back()
（3）go()：任意切换历史记录
参数为数值：
go(1) => history.forward()
go(-1) => history.back()
go(0) => 刷新页面的效果

// 刷新页面小总结：
location.reload();
location.href = '';
history.go(0)

7.screen对象 => 屏幕信息

screen.width：屏幕的宽度
screen.height：屏幕的高度
screen…availheight：浏览器可以使用的高度
screen.availWidth：浏览器可以使用的高度

8.offest系列 => 元素

（1）offsetWidth、offsetHeiht => 获取元素真实的宽/高值
① offsetWidth、offsetHeiht获取元素大小
=>(内容的宽度+padding+border)=>为数值类型
② 设置元素的大小（style.width style.height设置宽高）
offsetWidth/offsetHeight只读属性
（2）offsetParent
parentNode 找父元素
offsetParent 获取该元素最近有定位的父元素，如果都没有定位找到的是body
（3）offsetLeft、offsetTop
只能获取设置无效
offsetLeft获取的是整数(10.2px为10px)，获取的距离是相对于offsetParent的距离

9.scroll系列 => 内容

scrollWidth scrollHeight 内容的的宽度和高度
scrollTop scrollLeft 内容卷曲距离
如果卷曲值为0，没有卷曲，或者是没有滚动条

onscroll滚动条滚动的时候触发的事件，滚动条滚动一像素就会触发
页面级别的滚动 window.scroll = function(){ }

老版本的浏览器：通过HTML或body的scrollTop/scrollLeft获取卷曲距离
新版本浏览器：通过window.pageYoffset获取卷曲距离

// 兼容性写法
// 获取垂直方向的卷曲距离
var scrollX = window.pageYoffset || document.documentElement.scrollTop || document.bady.scrollLeft || 0;

// 获取水平方向的卷曲距离
var scrollY = window.pageXoffset || documentElement.scrollLeft || document.body.scrollLeft || 0;

10.client系列 => 可视区

clientWidth clientHeight 可视区宽高
如果内容没有撑开 scrollHeight、scrollWidth和clientHeight、clientWidth一样大小
clientTop clientLeft 上边框、左边框的大小
在窗口或框架被调整大小时发生。：onresize事件

老版本的浏览器：通过HTML或body的clientWidth获取可视区大小
新版本浏览器：用window.innerWidth window.innerHeight获取可视区大小

// 兼容性写法
// 获取垂直方向的卷曲距离
var clientW = window.innerWidth || document.documentElement.clientWidth || document.bady.clientWidth;

// 获取水平方向的卷曲距离
var clientH = window.innerHeight || document.documentElement.clientHeight || document.bady.clientHeight;

11.getComputedStyle方法获取计算后（起作用）的样式

语法：window.getComputStyle(元素，伪类)
元素：表示要获取那个元素计算后的样式
伪类：表示获取元素伪类的样式，通常不需要（写null）
返回值：返回了对象，对象里有元素所有计算后的样式
var ret = window.getComputedStyle(div, null, backgroundColor);
使用建议：对于复合样式，如果需要获取具体的样式，就写上具体的样式名，因为这样能够兼容更多的浏览器。
兼容性问题：IE678不支持该方法

console.log(div.currentStyle.backgroundColor);
console.log(div.currentStyle['backgroundColor']);