什么是BOM?
专门操作浏览器窗口的API,与浏览器交互的方法和接口——没有标准,有兼容性问题,表现为不同浏览器定义有差别,实现方式不同。
BOM是对浏览器本身进行操作,而DOM是对浏览器(可看成容器)内的内容进行操作。
浏览器对象模型
window | 代表整个窗口 |
history | 封装当前窗口打开后,成功访问过的历史url记录 |
navigator | 封装浏览器配置信息 |
document | 封装当前正在加载的网页内容 |
location | 封装了当前窗口正在打开的url地址 |
screen | 封装了屏幕的信息 |
event | 定义了网页中事件机制 |
window的2个角色:
1.代表gobal作为全局作用域对象,所有全局函数和全局变量都是window成员
2.封装所有DOM和BOM的API。
window对象——是浏览器的顶级对象
window.innerWidth
/window.innerHeight
:返回浏览器窗口的内部宽度和高度(不包括滚动条)。window.outerWidth
/window.outerHeight
:返回浏览器窗口的外部宽度和高度(包括滚动条和边框)。window.location.href
:返回当前页面的URL地址。window.location.hostname
:返回当前页面的主机名。window.location.pathname
:返回当前页面的路径。window.location.search
:返回当前页面的查询参数。window.location.hash
:返回当前页面的锚点。<p>浏览器窗口的内部宽度和高度: <span id="window-size"></span></p> <p>当前页面的URL地址: <span id="page-url"></span></p> <script> // 显示浏览器窗口的大小 document.getElementById("window-size").innerHTML = window.innerWidth + " x " + window.innerHeight; // 显示当前页面的URL地址 document.getElementById("page-url").innerHTML = window.location.href; </script>
结果为:
- 窗口加载事件
window.onload= function(){}
//或者
window.addEventListener("load",function(){});
window.onload是窗口加载事件,当文档内容完全加载完成会触发该事件
注意:window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。但是window.addEventListener不存在冲突问题。
- 调整窗口大小事件
window.onresize=function(){}
//或者
window.addEventListener("resize",function(){});
只要窗口大小发生像素变化,就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕宽度。
this指向
一般情况下this的最终指向是调用它的对象。
1.全局作用域或者普通函数中this指向全局对象window
console.log(this)
function fun(){console.log(this);}
2.方法调用中谁调用this指向谁
var Y = {
sayHi:function(){console.log(this);}//指向Y
}
Y.sayHi();//Y调用
3.构造函数中this指向构造函数的实例
function fun(){
console.log(this);//指向实例fun
}
var fun = new fun();
history对象
与浏览器历史记录进行交互。
back() | 可以后退功能 |
forward() | 前进功能 |
go(参数) | 1:前进,-1:后退 |
<button onclick="goBack()">返回上一页</button>
<button onclick="goForward()">前往下一页</button>
<script>
function goBack(){
//使用history对象的back()方法返回上一页
history.back();
}
function goForward(){
//使用history象的forward()方法前往下一页。
history.forward();
}
</script>
location对象
location.assign() | 跟href一样,可以跳转页面(重定向),记录历史后退。 |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.raload() | 刷新,重新加载页面。 |
<p id="p1">段落一</p>
<script>
var p = document.getElementById("p1")
p.innerHTML=location.href;
</script>
结果为
navigator对象
navigator.userAgent
:返回浏览器的User-Agent字符串,包含了浏览器的名称、版本、操作系统等信息。navigator.appName
:返回浏览器的名称。navigator.appVersion
:返回浏览器的版本号。navigator.platform
:返回浏览器所在的操作系统平台。navigator.language
:返回浏览器的默认语言。
<p>浏览器的名称:<span id="name"></span></p>
<p>浏览器版本号:<span id="version"></span></p>
<p>操作系统平台:<span id="platform"></span></p>
<p>默认语言:<span id="language"></span></p>
<script>
//获取浏览器信息
document.getElementById("name").innerHTML=navigator.appName;
document.getElementById("version").innerHTML=navigator.appVersion;
document.getElementById("platform").innerHTML=navigator.platform;
document.getElementById("language").innerHTML=navigator.language;
</script>
结果是:
event对象
event.type
:返回事件的类型。event.target
:返回事件的目标元素。event.clientX
/event.clientY
:返回鼠标指针的位置(相对于浏览器窗口左上角的坐标)。event.pageX
/event.pageY
:返回鼠标指针的位置(相对于文档左上角的坐标)。event.keyCode
:返回按下的键的ASCII码值。
实例
<button onclick="showEventInfo(event)">点击这里</button>
<script>
function showEventInfo(event) {
// 显示event对象的信息
alert("事件类型:" + event.type + "\n" +
"事件目标元素:" + event.target.tagName + "\n" +
"鼠标指针位置(相对于浏览器窗口左上角):" + event.clientX + "," + event.clientY + "\n" +
"鼠标指针位置(相对于文档左上角):" + event.pageX + "," + event.pageY + "\n" +
"按下的键的ASCII码值:" + event.keyCode);
}
</script>
结果是:
screen对象
- screen.width:屏幕的宽度,以像素为单位。
- screen.height:屏幕的高度,以像素为单位。
- screen.availWidth:屏幕可用的宽度,不包括Windows任务栏等。
- screen.availHeight:屏幕可用的高度,不包括Windows任务栏等。
- screen.colorDepth:屏幕的颜色深度,表示每个像素使用的比特数,通常为16位或32位。
实例:
<p>Screen Width: <span id="sw"></span></p>
<p>Screen Height: <span id="sh"></span></p>
<p>Available Width: <span id="aw"></span></p>
<p>Available Height: <span id="ah"></span></p>
<p>Color Depth: <span id="cd"></span></p>
<script>
document.getElementById("sw").innerHTML = screen.width;
document.getElementById("sh").innerHTML = screen.height;
document.getElementById("aw").innerHTML = screen.availWidth;
document.getElementById("ah").innerHTML = screen.availHeight;
document.getElementById("cd").innerHTML = screen.colorDepth;
</script>
结果为: