JavaScript操作BOM对象

最新推荐文章于 2022-11-18 12:49:18 发布

lily15241

最新推荐文章于 2022-11-18 12:49:18 发布

阅读量873

点赞数

本文链接：https://blog.csdn.net/lily15241/article/details/106993623

版权

本文介绍了JavaScript的浏览器对象模型（BOM），重点讲解了window对象，包括其属性和方法，以及history和location对象的功能。此外，还讨论了document对象，特别是其访问HTML元素的方法。最后，文章概述了JavaScript内置的Date、Array、String和Math对象，并提到了定时器函数setTimeout和setInterval的使用。

摘要由CSDN通过智能技术生成

window对象

浏览器对象模型(BOM)是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。BOM是一一个分
层结构，如下图所示。
在这里插入图片描述
window对象是整个BOM的核心
window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象如果文档定义了一个或多个框架，浏览器将为原始文档创建一个window 对象，同时为每个框架另外创建一个window对象。

使用BOM通常可实现如下功能
1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口及调整窗口的大小。
3.在浏览器窗口中实现页面的前进、后退功能。

window对象的常用属性
在这里插入图片描述
在JavaScript中，属性的语法格式如下：
window.属性名=“属性值”

window对象的常用方法
在这里插入图片描述

在JavaScript中，方法的使用格式如下：
window.方法名（）；

history对象和location对象

history对象
history对象提供用户最近浏览过的URL列表。但出于隐私方面的原因，history 对象不再允许脚本访问已经访问过的实际URL,可以使用history 对象提供的、逐个返回访问过的页面的方法。

history对象的方法
在这里插入图片描述

location对象
location对象提供当前页面的URL信息，并且可以重新装载当前页面或装入新页面。

location对象的属性
在这里插入图片描述

location对象的方法
在这里插入图片描述
使用代码制作查看一年四季变化的主页面，实现刷新功能
//春

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>春</title>
    <style type="text/css">
        body{
   margin:0;}
        img{
   
            border:0;
            padding:5px;
        }
        td{
   
            font-size:14px;
            line-height:20px;
        }
    </style>

</head>

<body><table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="images/spring.jpg" alt="春天" /></td>
        <td>春来――爆竹声中一岁除，春风送暖入屠苏<br />
            春雨――小楼一夜听春雨，深巷明朝卖杏花<br />
            春花――惆怅东栏一株雪，人生看得几清明<br />
            春风――春风又绿江南岸，明月何时照我还<br />
            春光――等闲识得东风面，万紫千红总是春<br />
            春景――试上超然台上看，半壕春水一城花<br />
            春游――东风知我欲山，吹断檐间积雨声 <br />
            春思――春心莫共花争发，一寸相思一寸灰<br />
            春寂――春潮带雨晚来急，野渡无人舟自横<br />
            春愁――问君能有几多愁，恰似一江春水向东流<br />
            春梦――枕上片时春梦中，行尽江南数千里<br />
            春恨――人生自是有情痴，此恨不关风和月<br />
            春归――落红不是无情物，化作春泥更护花<br />
            <a href="javascript:jump('summer.html')">夏天</a> <a href="javascript:jump('autumn.html')">秋天</a> <a href="javascript:jump('winter.html')">冬天</a>  <a href="javascript:history.back();">后退</a>   <a href="javascript:history.forward();">前进</a></td>
    </tr>
</table>
<script type="text/javascript">
    function jump(hurl){
   
        location.href=hurl;
    }
</script>
</body>
</html>

//夏

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
<title>夏</title>
<style type="text/css">
body{
   margin:0;}
img{
   
	border:0;
	padding:5px;    
	}
td{
   
	font-size:14px;
	line-height:23px;
	}
</style>

</head>

<body><table border="0" cellspacing="0" cellpadding="0">
  <tr>

最低0.47元/天解锁文章

lily15241

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作BOM对象

window对象浏览器对象模型(BOM)是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。BOM是一一个分层结构，如下图所示。window对象是整个BOM的核心window对象也称为浏览器对象。当浏览器打开HTML文档时，通常会创建一个window对象如果文档定义了一个或多个框架，浏览器将为原始文档创建一个win
复制链接

扫一扫