首页 > 其他分享> 文章详细

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

2021-06-01 13:01:07 阅读：146 来源： 互联网

标签：网页对象响应 window BOM url 窗口浏览器 location

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

标签：网页,对象,响应,window,BOM,url,窗口,浏览器,location
来源： https://blog.csdn.net/qq_48592827/article/details/117435781

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9