您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

JavaScript面向对象编程BOM对象

BOM对象

  • 一、BOM
    • 1、什么是BOM?
  • 二、浏览器对象模型:
    • 1.Window(窗口对象):
    • 2.Document(文档)对象
    • 3.location对象
    • 4.navigator对象
    • 5.screen对象
    • 6.history对象
    • 7.frames框架


提示:以下是本篇文章正文内容,下面案例可供参考

一、BOM

1、什么是BOM?

BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

二、浏览器对象模型:

BOM对象模型结构,如下图所示:
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

1.Window(窗口对象):

window对象常用属性:
(width:…,height…)’)
width: 窗口宽度;
height: 窗口高度;
top: 窗口距离屏幕上方的象素值;
left:窗口距离屏幕左侧的象素值;
在这里插入图片描述
window对象常用方法:
① open() 用指定的名称将指定的资源加载到浏览器上下文

open('新窗口需要打开的url地址','新窗口名(可写可不写)',' 打开窗口的特性')

在这里插入图片描述
② close() 关闭浏览器窗口

<script language="JavaScript" >
   function openwindow( ) { 
   open("adv.htm", "", " width=650, height=150"); }
   </script>
<body onLoad="openwindow( )"> 
   <H2>看看和我一起打开的广告窗口</H2> 
</body> 

注意:

在不写窗口名称时没有加引号,加入的特征不会执行,而会打开新页面;
在不写窗口特征时,则新窗口的url地址中的样式在当前页面呈现;
大多数修改窗口大小或位置的方法,目前已被主流浏览器禁用,对非window.open方法打开的窗口不能使用

2.Document(文档)对象

属性:
bgcolor;设置或检索document对象的背景颜色
body 文档正文的开始和结束
title 获取文档标题
location 获取文档url信息
url 设置或获取url地址
方法:
clear() 清除当前文档
close() 关闭输入流并强制显示发送的数据
write() 将文本,标签,写入文档

<script type="text/javascript">
	function openWindow(){
    console.log(document.bgColor);//获取背景色
	console.log(document.body.bgColor);	//获取body的背景色
    // 获取url相关的详细信息(数据)host: 表示主机的地址和端口号  hostname:  获取主机地址
	console.log(document.location.hostname);	

3.location对象

location对象提供了很多属性和方法用来解析URL。
在这里插入图片描述

location.href = “http://www.baidu.com“; //链接到百度 
location.hash // 返回url中#后面的内容,包含# 
location.host // 主机名,包括端口 
location.port // URL中声明的请求端口,默认情况下,大多数URL没有端口信息,所以该属性通常为空白 
location.hostname // 主机名 
location.pathname // url中的路径部分 
location.protocol // 返回当前页面的端口,如果页面使用的是默认端口(http:80,https:443),则大多数浏览器会显示为0或者不显示
location.search // 查询字符串(执行get请求的URL中问号后面的部分)

4.navigator对象

navigator对象运行当前代码的客户端浏览器的相关信息。

在这里插入图片描述

5.screen对象

screen对象获取用户屏幕信息。
在这里插入图片描述
注意:不是显示器的高和宽,是当前分辨率的高和宽(分辨率的概念)

availHeight:窗口可以使用的屏幕的高度
availWidth:窗口可以使用屏幕的宽度
screen.height:屏幕的高度
screen.width:屏幕的宽度

6.history对象

history对象当前窗口的浏览历史记录。
方法:
back() 加载 History 列表中的上一个 URL。
forward() 加载 History 列表中的下一个 URL。
go("url"ornumber) 加载 History 列表中的一个 URL,或要求浏览器移动指定的页面数。
back ( ) 方法相当于后退按钮(上一页)
forward ( ) 方法相当于前进按钮(下一页)
go (1) 代表前进 1 页,–>forward( ) 方法;
go(-1) 代表后退 1 页,–> back( ) 方法;

在这里插入图片描述在这里插入图片描述
示例代码:

<select name="" id="selectId" onchange="change();">
			<option value="">--请选择季节---</option>
			<option value="spring.html">春季</option>
			<option value="summer.html">夏季</option>
			<option value="automn.html">秋季</option>
			<option value="winter.html">冬季</option>
		</select>
		<script type="text/javascript">
			var selects=document.getElementById('selectId');
			function change(){
				// 获取选中的节点的value值
				// console.log(selects.value);
				window.location.href='../'+selects.value;
			}
	</script>


7.frames框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中

在父页面中,可通过window.frames[“frame1”]访问子页面的window对象(需等frame加载完毕)
在子页面中,可通过window.parent访问父页面的window对象(需等frame加载完毕)



分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进