-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-09-08
来源 ：CSDN「会璇转地木马」
阅读 486
评论 0
摘要：本文主要介绍了WEB前端开发入门到精通--JavaScript 对象模型，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
本文主要介绍了WEB前端开发入门到精通--JavaScript 对象模型，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
BOM 对象：
BOM 对象也称为内置对象（Browser Object Mode），是浏览器对象模型，也是JavaScript 的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM对象。可以理解为：window：document location navigator screen history。
window 对象：
window 对象表示浏览器窗口，所有浏览器都支持 window 对象，所有 JavaScript 全局对象，函数及变量均自动成为 window 对象的成员，其中全局变量是 window 对象的属性，全局函数是 window 对象的方法。
window 对象的常用方法如下：
*获取窗体的宽和高：有3种方法能够确定浏览器窗口的尺寸（浏览器窗口的宽和高不包括工具栏的宽和高，以及滚动条的宽和高）。
其中，对IE，Chrome，Firefox，Opera及Safari:
window.innerHeight:浏览器窗口的内部高度
window.innerWidth:浏览器窗口的内部宽度
对IE8，IE7，IE6，IE5:
document.documentElement.clientHeight
document.documentElement.clientWidth
*打开新窗口：
window.open(url); //弹出一个新窗口
*关闭当前窗口：
window.close(); //关闭当前窗口
*调整当前窗口的尺寸：
window.resizeTo(宽,高); //重新设置窗口大小
需要注意的是，从Firefox7开始，可以用 resizeTO 或者 resizeBy 改变窗口大小的仅仅是那些用 window.open 打开的页面，并且window.open 打开的窗口只能有一个Tab（标签页）其他窗口的大小不可以调整。
document 对象：
每个载入浏览器的 HTML 文档都会成为 document 对象，document 对象是 window 对象的一部分，可以通过window.document 属性对其进行访问，此对象可以从脚本中对 HTML 页面中的所有元素进行访问。
location 对象：
location 对象包含有关当前 URL 的信息，location 对象是 window 对象的一个部分，可以通过 window.location 属性访问。
navigator 对象：
navigator 对象包含有关浏览器的信息，所有浏览器都支持该对象。
screen 对象：
每个 window 对象的 screen 属性都引用一个 screen 对象。screen 对象中存放有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息优化它们的输出，已达到用户的显示要求。
history 对象：
history 对象包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可以通过 window.history 属性对其进行访问，所有浏览器都支持该对象。
BOM 操作：
下面将通过运用实例进行介绍：
*window 对象获得宽和高：
//跨浏览器兼容获取屏幕宽和高
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
alert(w + ':'+h);
*document 对象设置背景色和前景色：
<script>
window.onload = function(){ //网页加载完成后调用
document.bgColor = "#0fff00"; //设置网页背景色
document.fgColor = "#0000ff"; //设置网页前景色（页面上的文字颜色）
}
</script>
<body>
hello,world
</body>
*location 对象获取当前页面的 URL 链接和端口。
<script>
window.onload = function(){ //网页加载完毕后调用
alert(location.href); //弹出当前页面的URL链接
alert(location.port); //弹出当前页面访问的端口
}
</script>
*navigator 对象获取浏览器名称，平台版本信息，是否启用 cookie 状态，操作系统平台等。
<script>
window.onload = function(){ //网页加载完毕后调用
//返回浏览器的名称
document.write(navigator.appName + "<br/>");
//返回浏览器的平台和版本信息
document.write(navigator.appVersion + "<br/>");
//返回指明浏览器中是否启用 cookie 的布尔值
document.write(navigator.cookieEnabled + "<br/>");
//返回运行浏览器的操作系统平台
document.write(navigator.platform + "<br/>");
}
</script>
*screen 对象获取浏览器显示屏幕的宽和高，以及显示器屏幕的宽和高。
<script>
window.onload = function(){ //网页加载完毕后调用
document.write(screen.availHeight + "<br/>"); //返回浏览器显示屏幕的高度
document.write(screen.availWidth + "<br/>"); //返回浏览器显示屏幕的宽度
document.write(screen.height + "<br/>"); //返回浏览器屏幕的高度
document.write(screen.width + "<br/>"); //返回浏览器屏幕的宽度
}
</script>
*history 对象获取网页链接的长度：
len = history.length; //获取网页访问过的网页链接的长度
alert(len);
//history.back(); //回到上一次访问的页面
//history.forward(); //如果回去过了，就前进到下一个访问过的页面
//history.go(-2); //回到上上次访问的页面
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
