什么是Bom对象
浏览器对象模型提供了可以与浏览器窗口进行互动的对象结构。
BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!
Bom和Dom的区别
BOM
- BOM是Browser Object Model的缩写,即浏览器对象模型。
- BOM没有相关标准。不同浏览器定义有差别,实现方式不同。
- BOM的最根本对象是window。
DOM
- DOM是Document Object Model的缩写,即文档对象模型。
- DOM是W3C的标准。
- DOM最根本对象是document(实际上是window.document)。
DOM的最根本的对象是BOM的window对象的子对象。
BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作。
window对象
- innerWidth,innerHeight:页面视口宽高,相当于document.documentElement.clientWidth,document.documentElement.clientHeight
- outerWidth,outerHeight:浏览器窗口宽高
- screenLeft,screenTop:当前窗口相对屏幕的坐标,只能获取,不能设置
location对象
-
location.href :跳转页面,还可以获取当前页面的网址。
document.οnclick=function(){ console.log(location.href); location.href="http://www.163.com"; }
-
location.assign(网址):跳转页面。
-
location.replace(网址):替换当前页面,也是跳转页面,有历史记录。
-
location.hash:获取地址栏中#后面的内容,也就是锚点标记名
-
location.search:获取地址栏中?后面的内容,?号后面一般是访问地址的参数
-
location.pathname:地址栏中文件路径和名称
-
location.port:地址栏中的端口号
-
location.protocol:地址栏中的协议
-
location.hostname:地址栏中的域名
history对象
- history.back() :回退
- history.forward():前进
- history.go(1):跳转到第几个,负数是回退,正式是前进,0是刷新页面
screen对象
- screen.width,screen.height :全屏幕宽高
- screen.availWidth,screen.availHeight:不带任务栏的屏幕宽高
navigator对象
- navigator:用户浏览器信息