响应式网页设计之BOM对象模型

2023-12-19 18:32:09

BOM编程

一、初识BOM
- 1.什么是BOM
二、浏览器对象模型:

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

一、初识BOM

1.什么是BOM

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

二、浏览器对象模型:

BOM对象模型结构，如下图所示：

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 onl oad="openwindow( )"> 
   <H2>看看和我一起打开的广告窗口</H2> 
</body>

注意:

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

window对象常用事件：
window.onload：用于在网页加载完毕后立刻执行的操作
使用方法： window.οnlοad=函数名 *不加() 或window.οnlοad=匿名函数

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对象运行当前代码的客户端浏览器的相关信息。

 navigator.userAgent;    //返回浏览器信息

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加载完毕）

码农公寓