javascript基础二十一:说说你对BOM的理解,常见的BOM对象你了解哪些?

news2024/11/26 8:42:53

在这里插入图片描述
一、是什么

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

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

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

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

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

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

var name = '小爱同学';
function lookName(){
  alert(this.name);
}

console.log(window.name);  //小爱同学
lookName();                //小爱同学
window.lookName();         //小爱同学

关于窗口控制方法如下:

  • 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="http://www.vue3js.cn" 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:获取历史记录数

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

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

相关文章

Redis入门到实战笔记-Java客户端

这里写目录标题 哪些好用的客户端Jedis连接池 Spring Data Redis依赖修改默认序列化方式修改序列化代码&#xff1a;反序列化方式 哪些好用的客户端 Jedis 依赖&#xff1a; <dependency><groupId>redis.clients</groupId><artifactId>jedis</artif…

原来!自动化测试项目--的完整测试流程是这样的……

目录 需求分析&#xff1a; 整体流程图&#xff1a; 分析流程&#xff1a; 测试设计&#xff1a; 测试分析&#xff1a; 测试设计&#xff1a; 用例设计&#xff1a; 用例执行和回归 用例执行标准 bug回归标准 补充用例 质量分析 bug定位 前端定位&#xff1a; …

Axios后端程序员快速入门简述

axios 它的底层是用了 XMLHttpRequest&#xff08;xhr&#xff09;方式发送请求和接收响应&#xff0c;xhr 相对于之前讲过的 fetch api 来说&#xff0c;功能更强大&#xff0c;但由于是比较老的 api&#xff0c;不支持 Promise&#xff0c;axios 对 xhr 进行了封装&#xff0…

qt5.15.2 配置 android

第一步 安装jdk&#xff0c;最好安装 jdk11&#xff0c;因为他是与qt5.15.2这个能匹配上的 右击电脑&#xff0c;选择属性&#xff0c;选择高级系统设置&#xff0c;选择环境变量。 点击新建&#xff0c;变量名为JAVA_HOME,变量值为java安装的路径。我的如下图 JAVA_HOME D:\P…

Lecture 4 Text Classification

目录 Classification 分类Text Classification Tasks 文本分类任务Topic Classification 主题分类Sentiment Analysis 情感分析Native-Language Identification 母语识别Natural Language Inference 自然语言推理 Building a Text Classifier 构建文本分类器Choosing a Classif…

JDK、Tomcat、Redis、MySQL集齐,教你如何搭建高效性能测试项目!

目录 前言&#xff1a; 1. JDK 的安装 2. Tomcat 的安装 3. Redis 环境搭建 4. 数据库的安装 5. WEB 项目搭建 6. 性能测试 7. 总结 前言&#xff1a; 作为一个软件工程师&#xff0c;怎能不知道如何搭建一个性能测试项目呢&#xff1f;性能测试是一个软件工程师不可或…

【Python从入门到进阶】23.urllib使用post请求百度翻译

接上篇《22、urllib库基本使用》 上一篇我们介绍了实现爬虫的必备基础——urllib库的学习。本篇我们来使用urllib实现百度翻译的效果。 一、在线翻译服务 当我们需要翻译一段文字时&#xff0c;百度翻译是一个很常用的工具。它是由百度公司开发的一款在线翻译服务&#xff0c…

k8s pv与pvc

1.前言 PV 是 Kubernetes 集群中的一种资源对象&#xff0c;它代表着一块物理存储设备&#xff0c;例如磁盘、网络存储或云存储等。PV 可以被多个 Pod 共享&#xff0c;并且可以独立于 Pod 存在。PV 可以配置不同的访问模式 (Access Modes)&#xff0c;例如 ReadWriteOnce、Re…

传输优化是非谈

曾倾向于优化异常流的做法竟然最保守&#xff0c;异常是小概率事件&#xff0c;处理它只保障可用性&#xff0c;而不是优化性能&#xff0c;恰恰需要加速大概率的正常流处理&#xff0c;数据中心传输优化投入大量精力在丢包检测和重传上的思路需重估。 为 1% 的可能性而增加的…

uniapp注册模板

注册模板 学生注册 <template><view class"content"><uni-forms ref"from" :modelValue"formData"><uni-forms-item label"学号" name"num" :rules"[{required: true,errorMessage: 学号不能为…

华为OD机试真题 Java 实现【比赛评分】【2023 B卷 100分】,附详细解题思路

一、题目描述 一个有N个选手参加比赛&#xff0c;选手编号为1~N&#xff08;3<N<100&#xff09;&#xff0c;有M&#xff08;3<M<10&#xff09;个评委对选手进行打分。打分规则为每个评委对选手打分&#xff0c;最高分10分&#xff0c;最低分1分。 请计算得分最…

OpenMMLab-AI实战营第二期——3.基于RTMPose的耳朵穴位关键点检测(Colab+MMPose)

文章目录 1. Colab和Google云端硬盘1.1 建立项目文件和jupyter文件1.2 Colab运行时选择1.3 关联Colab中的文件和Google云端硬盘的文件 2. Colab和MMPose2.1 环境配置2.2 配置文件修改 3. Colab相关知识 1. Colab和Google云端硬盘 参考&#xff1a; 利用Colab上的TPU训练Keras…

RVOS操作系统内存管理简单实现-02

RVOS操作系统内存管理简单实现-02 内存管理分类内存映射表&#xff08;Memory Map)Linker Script 链接脚本语法基于符号定义获取程序运行时内存分布 基于 Page 实现动态内存分配代码讲解调试 扩展 本系列参考: 学习开发一个RISC-V上的操作系统 - 汪辰 - 2021春 整理而来&#x…

6-3 简单贪心(思想!不难)(看看这就这?)

贪心入门 贪心概念 贪心算法(又称贪婪算法)是指&#xff0c;在对问题求解时&#xff0c;总是做出在当前看来是最好的选择。也就是说&#xff0c;不从整体最优上加以考虑&#xff0c;他所做出的是在某种意义上的局部最优解。 贪心算法不是对所有问题都能得到整体最优解&#x…

【自制C++深度学习推理框架】卷积层的设计思路

卷积层的设计思路 使用Im2Col来实现高性能卷积 在深度学习中实现高性能卷积有以下几个方法&#xff1a; 并行计算&#xff1a;在网络或硬件层面上&#xff0c;利用并行计算的优势对卷积过程进行加速&#xff0c;例如使用GPU。 转换卷积算法&#xff1a;卷积操作可由矩阵相乘…

【生成数据】随机漫步

使用python来生成随机漫步数据&#xff0c;再使用matplotlib将这些数据呈现出来。 随机漫步&#xff1a;每次行走都是完全随机的&#xff0c;没有明确的方向&#xff0c;结果是由一系列随机决策决定的。也可以这么认为&#xff0c;随机漫步就是蚂蚁在晕头转向的情况下&#xff…

DNS详解

2.4 DNS&#xff1a;因特网的目录服务 我们首先要了解域名和IP地址的区别。IP地址是互联网上计算机唯一的逻辑地址&#xff0c;通过IP地址实现不同计算机之间的相互通信&#xff0c;每台联网计算机都需要通过IP地址来互相联系和分别。 但由于IP地址是由一串容易混淆的数字串构成…

Java String ,StringBuffer 和 StringBuilder 类

文章目录 一、Java String 类二、Java StringBuffer 和 StringBuilder 类总结 一、Java String 类 字符串广泛应用 在 Java 编程中&#xff0c;在 Java 中字符串属于对象&#xff0c;Java 提供了 String 类来创建和操作字符串。 创建字符串 创建字符串最简单的方式如下: St…

SiLu激活函数解释

SiLu激活函数 在yolo v5中&#xff0c;我们使用了SiLu激活函数 首先&#xff0c;了解一下激活函数的作用&#xff1a; 激活函数在神经网络中起到了非常重要的作用。以下是激活函数的一些主要功能&#xff1a; 引入非线性&#xff1a;激活函数的主要目标是在模型中引入非线性…

STM32F7xx Keil5 RTX RL-TCPnet DP83822移植

使用之前RTX工程模板 RTE中RL-TCPnet配置 暂时全部默认配置&#xff0c;DHCP已打开 修改RTE_Device.h ETH配置 修改DP83822驱动 去掉文件只读属性&#xff0c;之后需要修改&#xff0c;添加到工程 修改DP83822 ID RTE创建tcp server例程&#xff0c;参考该例程&#xff0c;进…