BOM浏览器对象模型
BOM浏览器对象模型
1.浏览器引入JavaScript
直接在HTML文件中引入
调用外部JS文件
使用a标签的href属性
事件里面直接写JS代码
<body>
<!-- HTML?? -->
<button onclick="javascript:alert('Hello World!')">点击</button>
</body>
2.BOM基本介绍
什么是BOM
英文全称Browser Object Model，浏览器对象模型
3.window对象
浏览器每打开一个窗口，就包含了一个window对象
全局属性和window属性的区别
不能使用delete操作法删除用var声明的变量，但是如果是window的属性就可以
let以及const所声明的变量
<body>
<script>
var i = 10;
let j = 20;
const k = 30;
alert(window.i);//10
alert(window.j);//undefined
alert(window.k);//undefined
</script>
</body>
常见属性
窗口大小
innerWidth ， innerHeight 和outerWidth ，outerHeight
innerHeight,innerWidth表示页面视图区的大小
outerHeight,outerWidth表示浏览器窗口本身的大小
窗口位置
screenLeft 和screenTop 还有 screenX 和screenY
这两组属性是表示窗口相对于屏幕左边和上边的位置
元素位置
offsetLeft 和 offsetTop
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 150px;
background-color: pink;
position: absolute;
top: 300px;
left: 200px;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
console.log(div.offsetLeft); // 200
console.log(div.offsetTop); // 300
</script>
</body>
元素大小
offsetWidth 和 offsetHeight
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 150px;
background-color: pink;
position: absolute;
top: 300px;
left: 200px;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
console.log(div.offsetWidth); // 100
console.log(div.offsetHeight); // 150
</script>
滚动位置
pageXOffset和pageYOffset
用来获取文档在窗口左上角水平和垂直方向滚动的像素
常见方法
系统提示框
alert() ：用于显示带有一条指定消息和一个确定按钮的警告框
窗口大小调整
resizeTo()
将浏览器窗口调整到指定的值
resizeBy()
相对于原来的浏览器窗口来进行调节
窗口位置移动
moveTo() 和moveBy()
打开和关闭窗口
window.open()
window.close()
定时函数
setInterval() 和 clearInterval()
setInterval设定指定的时间周期调用某个函数
clearInterval清除前面的设定
navigator对象
navigator对象属性
appCodeName
返回浏览器的代码名
appMinorVersion
返回浏览器的次级版本
appName
返回浏览器名称
appVersion
返回浏览器的平台和版本信息
location对象
常见属性
hash
返回一个URL的锚部分
host
返回一个URL的主机名和端口
hostname
返回URL的主机名
href
返回完整的URL
常见方法
assign()
载入一个新的文档
reload()
重新载入当前文档
replace()
用新的文档替换当前文档
history对象
常见属性
length
返回浏览器历史列表中URL的数量
常见方法
back()
加载history列表中的前一个URL
forward()
加载history列表中的下一个URL
go()
加载history列表中的某个具体页面
screen对象
height
屏幕的像素高度
width
屏幕的像素宽度
document对象
cookie
创建cookie
修改cookie
读取cookie
