首页 > 其他分享 >JS BOM

JS BOM

时间:2024-03-26 12:31:16浏览次数:21  
标签:浏览器 框架 对象 JS window BOM 窗口 属性

window对象

BOM是Browser Object Mode的缩写,表示浏览器对象模型。ES是一种语言,跟具体环境没关系。DOM的作用是将文档转换为相应的对象,它跟具体环境也没有关系。而DOM则是一种将浏览器这个具体的环境对应为一种对象的模型,它提供了ES跟浏览器之间进行交互的桥梁。
因为DOM没有自己的标准,所以不同浏览器的实现细节并不相同,但是它们还是有很多统一的地方。
虽然BOM没有自己的标准,但是HTML5标准中对BOM中的对象都做了相应的规定。如果浏览器实现HTML5标准,那么BOM的结构也就有望趋向统一,这会使前端开发中令人无奈的浏览器兼容性问题得到一定改善。

window对象是浏览器中的顶层对象,其他所有的对象都直接或间接包含它下面,但是,通过window对象只能直接操作它自己直接包含的属性对象,而无法操作更深层次的对象。

window 对象的属性大致可以分为以下六大部分
  • 窗口、框架相关属性
  • 窗口操作相关属性
  • 弹出窗口相关属性
  • 浏览器对象相关属性
  • 定时器相关属性
  • 其他属性

1. 窗口、框架相关属性

window对象中跟窗口、框架相关的属性有:window、self、frames、length、top、parent和frameElement 7个属性。

  • 其中,前三个(window、self、frames)都是指向window对象自身,它们所代表的内容完全相同,知识所使用的场景不同。
  • widow中的length属性指页面中所包含的框架数量
  • top属性表示最顶层框架
  • parent表示上层框架,对于本来就是最顶层的window对象来说,top和parent属性就是自身
  • frameElement属性是框架窗口中用来获取(iframe)框架节点自身用的。
1.1 frameElement

frameElement属性是HTMLIFrameElement类型,这是在DOM的HTML子标准中定义的类型,它一共有10个可读写属性,每个均对应一个iframe标签的属性,另外还有一个只读属性(contentDocument:获取框架所包含的document对象)。
10个可读写属性如下:

  • align: 排列方式,可以取left、right、top、middle、bottom等值,最好使用样式来设定,而不要使用align值
  • frameBorder: 框架的边框
  • src: 框架显示文档的地址
  • height: 框架的高度
  • width: 框架的宽度
  • longDesc: 长描述,可以指定一个URL来存放iframe的描述信息
  • marginHeight:框架的上、下边距
  • marginWidth: 框架的左、右边距
  • name: 框架的名称
  • scrolling: 是否显示框架的滚动条

2. 窗口操作相关属性

  • open(url, target, features, replace): 打开窗口
  • close(): 关闭窗口
  • stop(): 停止加载
  • focus(): 获取焦点
  • blur(): 释放焦点

3. 弹出窗口相关属性

  • alert(message): 提示窗口
  • confirm(message): 确认窗口给
  • prompt(message, defaule): 输入窗口
  • print(): 打印窗口

4. 浏览器对象相关属性

  • document: 文档对象
  • location: 位置对象
  • history: 历史记录对象
  • navigator: 存储浏览器信息
  • applicationCache: 应用缓存对象
  • locationbar: 地址栏对象
  • menubar: 菜单栏对象
  • personalbar: 个人栏对象
  • scrollbars:滚动条对象
  • statusbar: 状态栏对象
  • toolbar: 工具栏对象

5. 定时器相关属性

  • setTimeout(func, delay): 设置倒计时操作
  • clearTimeout(timeoutID): 清除倒计时设置
  • setInterval(func, delay): 设置定时操作
  • clearInterval(intervalID): 清除定时设置

6. 其他属性

window对象除了上述属性外,还包含其他一些属性,这些属性主要包括三大类:ES中的全局属性、自定义属性(包括自定义的全局变量)和不同浏览器特有的属性。
因为window对象同时还是ES中的Global对象,所以它还会包含ES中的全局属性。例如,NaN、undefined,以及Function、String、Array等所有的内置性对象。

localtion对象

localtion对象的作用是对当前窗口(或框架)的地址进行读写,主要包含8个读写属性和3个方法属性。

8个读写属性

  • href: 超链接地址,页面的完整url地址内容
  • protocol: 页面所使用的协议
  • hostname: 主机名
  • port: 端口号
  • host: 主机地址,包括主机名和端口号
  • pathname: 页面路径地址
  • search: 查询内容
  • hash: 锚点
localtion的8个属性中,href表示完整的url地址,其他7个属性都表示url地址中的一部分。

3个方法属性

  • assign(url): 指定新地址,即转到新地址
  • replace(url) : 使用新地址内容替换当前窗口内容(不可后退)
  • reload(): 重新加载界面

示例:

// https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%8E%86%E5%8F%B2/152769#3_1

其他对象

history对象

history对象用于保存window对象浏览过的历史记录,它一共包含3个方法属性和一个数值属性:

  • go(num):跳转到指定页
  • back(): 前一页
  • forward():后一页
  • length: 浏览过页面的个数

go方法可以跳转到浏览过的页面,当num大于0向后(新页面)跳,num小于0时向前(旧页面)跳。back = go(-1); forward = go(1)。

navigator对象

navigator对象的属性保存了浏览器自身相关的信息,不同浏览器中,navigator对象所包含的属性也不尽相同,但HTML5中对其做出了规定,其中主要包含以下属性:

  • appCodeName: 浏览器代码名,一般都返回Mozilla
  • appName: 浏览器的名称
  • appVersion: 浏览器版本信息
  • platform: 浏览器所在平台,即操作系统
  • produce: 产品名称,一般返回“Gecko”
  • tainEnabled(): 是否允许数据污点,现在已不再使用,一般会返回false
  • userAgent: 用户代理字符串
  • language: 浏览器优先使用的语言
  • cookieEnabled: Cookie是否可用
  • plugins: 浏览器安装的插件数组
  • mimeTypes: 浏览器中注册的MIME Type数组
  • javaEnabled(): 浏览器是否可执行java脚本
  • onLine: 浏览器是否在线

标签:浏览器,框架,对象,JS,window,BOM,窗口,属性
From: https://blog.csdn.net/iotzzh/article/details/136891917

相关文章

  • 36.html+css+js网页设计实例/“美食”主题介绍/web前端期末大作业/
    一、前言本实例以“美食”为主题设计,应用html+css+js,包括图片轮翻效果、菜单导航、三级菜单、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我......
  • 爬虫之JS混淆和加密案例
    需求:中国空气质量在线监测分析平台是一个收录全国各大城市天气数据的网站,包括温度、湿度、PM2.5、AQI等数据,链接为:https://www.aqistudy.cn/html/city_detail.html,网站显示为:一连串的分析该网站所有的空气质量数据都是基于图表进行显示的,并且都是触发鼠标滑动或者点动......
  • 还写那么多函数?js简单封装,拿去用吧
    ;(function($){ varwprtTheme={ //Maininitfunction init:function(){ this.config(); this.events(); }, //Definevarsforcaching config:function(){ ......
  • 【附源码】Node.js毕业设计高校迎新管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着信息技术的飞速发展,高校迎新工作也日益依赖于数字化和信息化手段。传统的手工操作方式已经无法满足现代高校迎新工作的高效率、高质量要求。因此,构建一......
  • 【附源码】Node.js毕业设计高校疫情期间学生日常管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着COVID-19疫情的爆发,全球范围内的教育行业遭受了巨大的冲击。为了防止病毒的传播,许多国家和地区都采取了封锁措施,学校被迫关闭,线下教学活动无法正常进行......
  • 【附源码】Node.js毕业设计高校疫情监控防控监测系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着全球化进程的加速,人类社会的相互联系日益紧密,但同时也带来了各种疾病的迅速传播。尤其是近年来,新型冠状病毒(COVID-19)的出现,给全球带来了巨大的冲击和挑......
  • 【附源码】Node.js毕业设计高校疫情管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着科技的不断发展和互联网技术的普及,信息化管理系统在各个领域的应用越来越广泛。特别是在新冠疫情期间,高校疫情管理成为了一个重要的课题。为了有效地控......
  • js数组遍历方法及应用,看这篇就够了
    背景:日常开发中处理数组常用到的遍历方法,看这篇就够了目录数组遍历方法forforEachfor...ofmapfilterfor...inreduce求和、求积数组去重计算数组中每个元素出现的次数将二维数组转化为一维将多维数组转化为一维对象里的属性求和按对象属性给数组分组简单对比数组......
  • nestJs中 Guards ,Interceptors ,Pipes ,Controller ,Filters的执行顺序
    执行顺序:Guards(守卫):Guards是最先执行的中间件,用于确定是否允许请求继续处理。Guards在请求被路由到控制器之前执行,通常用于身份验证、角色检查或权限验证。如果Guards返回一个布尔值 false 或者抛出一个异常,请求处理流程将终止,不会执行后续的Pipes、Interceptors或控......
  • [附源码]计算机毕业设计高校教材管理系统(JSP+java+springmvc+mysql+MyBatis)
    本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考。项目文件图项目介绍随着高校教育资源的不断扩充和教育体系的日益复杂化,高效的教材管理变得尤为重要。一个专业的高校教材管理系统能够实现教材信息的集中管理、库存状态实时监控、......