说说对BOM的理解(常见的BOM对象了解哪些)

news2025/1/23 20:23:17

在这里插入图片描述


文章目录

  • 一、是什么
  • 二、window
  • 三、location
  • 四、navigator
  • 五、screen
  • 六、history


一、是什么

BOM (Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象

其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率

浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。区别如下:
在这里插入图片描述


二、window

BOM的核心对象是window,它表示浏览器的一个实例

在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象

因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var name = 'js每日一题';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //js每日一题
lookName();                //js每日一题
window.lookName();         //js每日一题

关于窗口控制方法如下:

  • moveBy(x,y):从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
  • moveTo(x,y):移动窗体左上角到相对于屏幕左上角的(x,y)
  • resizeBy(w,h):相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
  • resizeTo(w,h):把窗体宽度调整为w个像素,高度调整为h个像素
  • scrollTo(x,y):如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
  • scrollBy(x,y): 如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素

window.open() 既可以导航到一个特定的url,也可以打开一个新的浏览器窗口

如果 window.open() 传递了第二个参数,且该参数是已有窗口或者框架的名称,那么就会在目标窗口加载第一个参数指定的URL

window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>

window.open() 会返回新窗口的引用,也就是新窗口的 window 对象

const myWin = window.open('http://www.vue3js.cn','myWin')

window.close() 仅用于通过 window.open() 打开的窗口

新创建的 window 对象有一个 opener 属性,该属性指向打开他的原始窗口对象


三、location

url地址如下:

http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents

location属性描述如下:
在这里插入图片描述
除了 hash之外,只要修改location的一个属性,就会导致页面重新加载新URL

location.reload(),此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载

如果要强制从服务器中重新加载,传递一个参数true即可


四、navigator

navigator 对象主要用来获取浏览器的属性,区分浏览器类型。属性较多,且兼容性比较复杂

下表列出了navigator对象接口定义的属性和方法:
在这里插入图片描述


五、screen

保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度
在这里插入图片描述


六、history

history对象主要用来操作浏览器URL的历史记录,可以通过参数向前,向后,或者向指定URL跳转

常用的属性如下:

  • history.go()

接收一个整数数字或者字符串参数:向最近的一个记录中包含指定字符串的页面跳转

history.go('maixaofei.com')

当参数为整数数字的时候,正数表示向前跳转指定的页面,负数为向后跳转指定的页面

history.go(3) //向前跳转三个记录
history.go(-1) //向后跳转一个记录
  • history.forward():向前跳转一个页面
  • history.back():向后跳转一个页面
  • history.length:获取历史记录数

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1454523.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库小技能:事务隔离级别

文章目录 引言I 数据库1.1 事务的隔离级别1.2 报表业务场景:可重复读1.3 高并发场景:读已提交1.4 读写分离1.5 分表规范1.6 分析数据库死锁引言 事务隔离级别的选择: 报表业务场景:可重复读报表业务场景需要同一时间维度进行统计,反应数据趋势,进行查询的时候需要使用re…

基于springboot车辆充电桩管理系统源码和论文

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;车辆充电桩管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;…

Qt实用技巧:QCustomPlot做北斗GPS显示绝对位置运动轨迹和相对位置运动轨迹图的时,使图按照输入点顺序连曲线

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/136131310 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

2023年全球架构师峰会(ArchSummit北京站2023):核心内容与学习收获(附大会核心PPT下载)

本次峰会是一场集结了全球顶级技术专家和行业领袖的盛会。作为一年一度的重要技术交流活动&#xff0c;本次峰会聚焦当前及未来软件架构的发展趋势、技术挑战与创新实践&#xff0c;旨在为参会者提供一个深度交流、学习与合作的平台。在为期两天的会议中&#xff0c;与会者不仅…

宠物赛道都卷出了哪些花样?媒介盒子分享

如今的宠物市场&#xff0c;已经从让宠物吃饱喝足的基本生理需求&#xff0c;拓展到五花八门的精神需求&#xff0c;与“马斯洛需求定理”高度一致。商家们看到宠物经济的潜力&#xff0c;不再满足于给人类造节&#xff0c;给毛孩子造节也是重中之重&#xff0c;今天媒介盒子就…

vcruntime140.dll文件下载的多种方案分享,最新下载安装方法解析

安装或运行软件时常遇到缺失系统文件的相关问题&#xff0c;一个典型的例子是vcruntime140.dll​丢失错误&#xff0c;这种情况经常发生在运行那些基于Visual Studio 2015开发的应用上。缺乏这个文件的提示可能会严重拖慢程序的响应速度&#xff0c;并有可能阻碍用户使用受影响…

[每周一更]-(第87期):主流软件负载均衡器对比(LVS、Nginx、HAproxy)

负载均衡的实现方式一般来说有以下三种&#xff1a; 基于DNS负载均衡&#xff1a;直接通过DNS来实现负载均衡。优点是非常简单&#xff0c;缺点是调整后不知道啥时生效(当然正常情况下几十分钟&#xff0c;长的也可能更长) 基于硬件负载均衡&#xff1a;购买硬件&#xff0c;也…

三勾点餐系统源码,java后台+微信小程序 实现完整的餐厅点餐

三勾点餐系统基于javaspringbootelement-plusuniapp打造的面向开发的小程序商城&#xff0c;方便二次开发或直接使用&#xff0c;可发布到多端&#xff0c;包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。 功能介绍 1.…

(22.12.20)matlab2022+yalmip+cplex安装教程,win11 x64

前言 Hi,你好&#xff01;最近刚刚更换新的电脑设备&#xff0c;安装软件时尽量选择最新版本&#xff0c;但也遇到了大大小小的安装问题&#xff0c;这里把踩到的坑一并总结出来&#xff0c;给出一份还算合理的MATLAByalmipCPLEX安装教程&#xff08;win11&#xff09;。 MAT…

Code Composer Studio (CCS) - Build All

Code Composer Studio [CCS] - Build All 1. Build AllReferences 1. Build All Project -> Build All (Ctrl B) References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

LeetCode LCR 085. 括号生成

题目链接https://leetcode.cn/problems/IDBivT/description/ 正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 class Solution {public List<String> generateParenthesis(int n) {List<String>…

Ubuntu开启SSH远程登录

正文共&#xff1a;555 字 13 图&#xff0c;预估阅读时间&#xff1a;1 分钟 很久很久之前&#xff0c;我们装了一台Ubuntu&#xff08;66%的经验丰富开发者和69%的学生更喜欢的Ubuntu的安装初体验&#xff09;&#xff0c;今天翻出来准备重新使用一下&#xff0c;突然发现它竟…

boost搜索引擎项目

目录 一、对数据源的数据清洗(去标签)操作&#xff1a;parse.cc二、根据去标签之后的干净的数据构建正排和倒排索引&#xff1a;index.hpp三、提供搜索功能&#xff1a;searcher.hpp四、放公用方法的头文件(包括boost库中的一些方法以及jieba分词的方法)&#xff1a;util.hpp五…

【IntelliJ IDEA】IDEA自动生成serialVersionUID的办法

digest&#xff1a;实体对象实现了java.io.Serializable接口后&#xff0c;一般都会提供一个serialVersionUID一做版本区分。在IDEA里&#xff0c;可以通过一些设置&#xff0c;帮助我们快速生成serialVersionUID。 1.IDEA设置序列化类检测序列化标识 File --> Settings --…

王力宏胜诉,事实胜于雄辩,真相终将大白。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 好的&#xff0c;以下是对“2月5日&#xff0c;王力宏工作室在…

中小学信息学奥赛CSP-J认证 CCF非专业级别软件能力认证-入门组初赛模拟题第三套(阅读程序题)

CSP-J入门组初赛模拟题第三套 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计40分) 第一题 1 #include<iostream> 2 #include<cstdio> …

第 124 场 LeetCode 双周赛题解

A 相同分数的最大操作数目 I 模拟 class Solution { public:int maxOperations(vector<int> &nums) {int n nums.size();int s nums[0] nums[1];int res 1;for (int i 2; i 1 < n; i 2)if (nums[i] nums[i 1] s)res;elsebreak;return res;} };B 进行操作…

kali无线渗透之蓝牙技术

“传统蓝牙”规范在2.4GHz的ISM波段上定义了79个信道&#xff0c;每个信道有1MHz的带宽。设备在这些信道中以每秒1600次的频率进行跳转&#xff0c;换句话说&#xff0c;就是每微秒625次跳转。这项信道跳转技术被称为“跳频扩频”(Frequency HoppingSpread Spectrum&#xff0c…

文件上传漏洞--Upload-labs--Pass06--空格绕过

一、什么是空格绕过 在Windows系统中&#xff0c;Windows特性会自动删除文件后缀名后的空格&#xff0c;这使我们看 .php 和 .php 二者没有任何区别&#xff0c;实际上二者是有区别的。若网页源码没有使用 trim()函数 来进行去除空格的操作&#xff0c;就会使网页存在 空格绕…

尾矿库排洪系统结构仿真APP助力尾矿库本质安全

1、背景介绍 尾矿库作为重大危险源之一&#xff0c;在国际灾害事故排名中位列第18位&#xff0c;根据中国钼业2019年8月刊《中国尾矿库溃坝与泄漏事故统计及成因分析》的统计&#xff0c;在46起尾矿库泄漏事故中&#xff0c;由于排洪设施导致的尾矿泄漏事故占比高达1/3&#x…