BOM(Browser Object Model浏览器对象模型)
BOM是JS中的一个组成部分,用于操作浏览器
BOM 可以做的事情有很多很多
获取浏览器的视口尺寸
修改浏览器的地址栏
通过BOM可以操作历史记录
可以关闭页面
可以设置定时器 延时器
可以获取浏览器的信息
……
获取浏览器的尺寸
console.log(window.innerWidth); // 输出浏览器视口宽度
console.log(window.innerHeight); // 输出浏览器视口高度
window对象
该对象是BOM的具体对象。所有的BOM内容都可以通过它来获取
特点:所有的window上的属性,在访问时,可以省略"window. "
window.location
是浏览器中负责浏览器的地址栏的相关对象
- href属性 用于设置和读取当前浏览器窗口的地址栏内容
// 将当前页面的地址栏修改为百度 也就是跳转到百度
location.href = "https://www.baidu.com";
- reload方法 用于刷新当前页面
location.reload(); // 刷新页面
window.history
是浏览器中负责历史记录的相关对象
- forward方法 让历史记录前进一次
history.forward(); // 前进一次
- back方法 让历史记录后退一次
history.back(); // 后退一次
- go方法 接受一个数字作为参数
如果为0 表示刷新当前页面
如果为正数 表示前进几次
如果为负数 表示后退几次
history.go(0); // 刷新页面
history.go(1); // 前进一步 等价于history.forward();
history.go(2); // 前进两步
history.go(-1); // 后退一步 等价于history.back();
history.go(-2); // 后退两步
打开关闭页面
// 打开页面
window.open(打开的页面的网址);
// 关闭页面
window.close();
事件
- load事件 在资源都加载完毕之后触发
window.onload = function() {
// code... 这里的代码会在所有资源加载完毕之后执行
}
- scroll事件 当页面有卷动值(页面比视口高)时,页面卷动值发生了改变时会触发
window.onscroll = function() {
// code... 这里的代码会在页面卷动值发生改变时触发
}
浏览器信息
window.navigator 获取浏览器对象
- navigator.userAgent 获取浏览器代理信息字符串
- navigator.platform 获取平台信息
setInterval(重点)
- 第一个参数是函数
- 表示要执行的代码
- 第二个参数是数字
- 表示执行的时间间隔 单位是毫秒
- 返回值是数字 这个数字是一个编号 代表这是第几个定时器
// 每一秒都会执行一次输出
setInterval(function() {
console.log(1);
}, 1000);
今天只需要知道这是一个可以让代码按照时间循环执行的函数即可。
setTimeout(重点)
- 第一个参数是函数
- 表示要执行的代码
- 第二个参数是数字
- 表示延迟的时间 单位是毫秒
- 返回值是数字 这个数字是一个编号 代表这是第几个定时器
// 1秒后输出一次 不再输出
setTimeout(function() {
console.log(1);
}, 1000)
clearInterval(重点)
- 接受一个参数 就是要清除的定时器或者延时器的编号
clearTimeout(重点)
- 接受一个参数 就是要清除的定时器或者延时器的编号
注:以上两个方法可以混合使用,但不推荐。
DOM(document object model文档对象模型)
document, 该对象是window的属性。但是因为太重要,所以单独成立一个概念。
它包含着所有操作文档的方法。
获取元素
在JS中操作元素,必须要先获取到元素
-
根据ID获取元素
- document.getElementById(id)
该方法用于根据ID获取元素 ID是HTML标签的属性 应当具备唯一性 - 返回值:如果有这个元素 就可以得到该元素对象。如果没有,就是null。
- document.getElementById(id)
-
根据标签名获取元素
- document.getElementsByTagName(tagName)
- 返回值: 集合对象(类数组对象)
-
根据name属性获取元素
- document.getElementsByName(name)
- 返回值: 集合对象(类数组对象)
-
根据选择器获取元素
- document.querySelector(selector)
- 返回值: 元素对象
-
根据选择器获取多个元素
- document.querySelectorAll(selector);
- 返回值: 集合对象(类数组对象)
额外知识点
- 获取页面卷动值
- document.documentElement.scrollTop
- document.body.scrollTop
统一写法: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-
获取页面高度
- document.body.clientHeight
-
操作元素的行内样式
// 设置行内样式
dom.style.xxx = yyy;
// xxx 表示对应的css样式属性名 如果用点语法,就需要使用驼峰 如果用方括号语法 则可以不用驼峰 但是一定要加双引号
// yyy 表示对应的属性值
// 驼峰写法
box.style.backgroundColor = "black";
// 方括号写法
box.style["background-color"] = "black";