HTML----JavaScript操作对象BOM对象

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

本章要求

• 了解BOM模型
• 掌握BOM模型实际应用

---

一.BOM模型概述

    BOM（浏览器对象模型）是JavaScript中的一个重要概念，它提供了一组用于控制浏览器窗口和页面内容的对象和方法。

BOM可实现功能：

• 弹出新的浏览器窗口 移动、
• 关闭浏览器窗口以及调整窗口的大小
• 页面的前进、后退

二.BOM核心：window对象

        window对象：表示浏览器窗口或框架。它是BOM的顶层对象，包含了浏览器窗口的各种属性和方法，比如窗口大小、位置、打开新窗口等。

 常用属性

• history 属性

history属性是一个表示浏览器历史记录的对象。通过history属性可以使用JavaScript执行以下操作：返回上一个页面，进入下一个页面，获取历史记录长度等等。

 

•  location属性

location属性表示当前文档的URL地址。它提供了访问和操作URL的方法。

通过上述属性实现的功能和浏览器左上角前进，后退，刷新等按钮一致。

 

 案例

	






返回主页面

查看鲜花详情  
刷新本页

常用方法：

针对window对象的常用方法是对浏览器窗口进行一系列操作，例如点击某个按钮关闭，关闭某页面时需要再次确认等等，这些都可以通过下面的常用方法实现。

prompt() 以及alert()案例在前文基础篇中有详细介绍此处不做过多赘述，重点讲解剩余几种

• confirm() 案例

confirm() :显示一个带有提示信息，确定和取消按钮的对话框。

语法

window.confirm("提示信息")

•  open ()+close()案例

 open ()：打开一个新的浏览器窗口，加载给定 URL 所指定的文档。

close()：关闭浏览器页面

语法：

window.open("弹出窗口的url")

    
    
    

//页面加载时调用对应函数

    

        关闭
    
    

document对象

CSS中选择器代表站在CSS角度去找html文档中的标签，document对象则是站在javascript角度去找html文档中的标签。简单来说，document是JS中的选择器。

通过referrer()：返回含有当前问文档的URL

 案例

• 领奖页面代码

下面的代码中含有 href="praise.html" 即该URL含有奖品显示页面文档，因此当点击超链接跳转时，奖品显示页面会导入领奖页面的URL，此时if 语句中URL不为空，页面将显示

”大奖赶快拿啦！笔记本！数码相机！" 字样。

    
    
    



    
    
马上去领奖啦！

• 奖品显示页面代码 

直接运行后，未载入本页面文档地址，URL问空，将显示"您不是从领奖页面进入，5秒后将自动跳转到登录页面"

• 定时函数跳转页面代码 

5s后自动跳转到该页面

 

---

练习