什么是BOM
BOM是浏览器对象模型
认识BOM
1:BOM 包括所有的JS 对象,是一个对象集合群
2: 在JS 中最大对象是window对象.
3: 全局的也是相对window 来说的;也就是说全局的东西,其它地方都可以访问
4:学习DOM 目的;进一步熟悉JS 是怎么在浏览器这个平拍进行运行的
5; 这里需要更加了解浏览器一些其它的功能
作用:
使JS有能力和浏览器对话。 注意区分:时间对象;是实现用户和浏览器的交接;js与html和CSS 的交互
Bom 对象的结构图
window对象
window是最顶层的对象
window有六大属性,这六大属性本身也是对象
DOM对象
frames[]
history | <作用保存浏览器历史记录信息> |
---|---|
back(): | 加载 history 列表中的前一个 URL。 |
forward(): | 加载 history 列表中的下一个 URL。 |
go(): | 加载 history 列表中的某个具体页面。 |
如常见的返回上一页: | history.go(-1)和history.back() |
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="./09返回页面操作.html">跳转页面</a>
<div class="btn">下一个</div>
<script>
var btn = document.getElementsByClassName('btn')[0]
</script>
</body>
</html>
----------------点击上方a标签,跳转至下个页面,点击下个页面的btn事件可返回至上方页面----------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="btn">返回上一个页面</div>
<script>
var btn = document.getElementsByClassName('btn')[0]
btn.addEventListener('click', function () {
//加载 history 列表中的前一个 URL链接;非地址 ;换句话说;返回上一个页面 绝对路径
history.back()
})
</script>
</body>
</html>
location
可通过 window.location 属性来访问,对象中信息,与URL 利用有关的所有信息
location.href | /获取url地 |
---|---|
location.pathName | /获取页面文件路 |
navigator
包含的属性描述了正在使用的浏览器
常用属性:
appName | 返回浏览器的名称 |
---|---|
appVersion | 返回浏览器的平台和版本信息 |
platform | 返回运行浏览器的操作系统平台 |
appCodeName | 返回浏览器的代码名 |
screen
存放着有关显示浏览器屏幕的信息
常用属性:
availHeight | 返回显示屏幕的可用高度(以像素计,减去界面特性,比如窗口任务栏) |
---|---|
availWidth | 返回显示屏幕的可用宽度(以像素计,减去界面特性,比如窗口任务栏) |
height | 返回屏幕区域的实际高度 |
width | 返回屏幕区域的实际宽度 |
window对象下的document属性,也是对象
对象属性与方法
window的属性和方法的调用:
window.属性 ,window.方法()
也可以直接 属性 方法(),但在多浏览器的情况下不推荐,最好是带着window
常用的属性和方法:
Alert() | 弹出一个对话框 |
---|---|
Confirm(‘请确定或者取消’) | 有确定和取消的对话框 |
Var num = prompt(‘请输入一个数字’,0) | 第一个参数是说明,第二个是说明,返回输入的值 |
Open() | 新建窗口,它可以接受三个参数 |
Open() | 弹出一个新的窗口 |
Open(‘http://www.baidu.com’) | 第一个参数是你要跳转的URL |
Open(‘http://www.baidu.com’,’baidu’) | 窗口的名称或者窗口的目标,命名可以给新窗口设置一个名称,凡是以这个名称打开的窗口都在这个窗口里加载URL;目标_blank _parent…以什么形式打开 |
Open(‘http://www.baidu.com’,’baidu’,’width=400,height=400’) | 特定的字符串,表示各种窗口的配置 |
open本身会返回这个窗口的window对象 | |
获取是什么模式的浏览器方法 | document. compotmode // CSS1compot 标准模式 BackCompat 怪异模式 |
例:
window.alert('弹框方法;可以省略window') // 阻塞的邹勇
window.console.log('console对象也是window下的方法')// 测试作用
window.confirm(); //用于显示一个带有指定消息和 OK 及取消按钮的对话框
window.close(); //关闭当前窗口
window.prompt() // 输入数字内容
window.open('http://www.baidu.com') // 初始化加载网页时候;代开一个页面