【前端知识之JS】BOM的理解
前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍BOM是什么，以及常用的BOM：window,location,navigator,screen,history。
文章目录
- 前言
- 一、BOM是什么
- 二、window
- 三、location
- 四、navigator
- 五、screen
- 六、history
一、BOM是什么
- BOM (Browser Object Model)，浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象
- 作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率
- 浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。
二、window
- window有双重角色，即是浏览器窗口的一个接口，又是全局对象，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
- moveBy(x,y)：从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，向上移动窗体。
- moveTo(x,y)：移动窗体左上角到相对于屏幕左上角的(x,y)点，
- resizeBy(w,h)：相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体。
- resizeTo(x,y)：把窗体宽度调整为w个像素，高度调整为h个像素。
- scrollTo(x,y)：如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
- scrollBy(x,y)：如果有滚动条，将横向滚动条向左移动x个像素，将纵向滚动条向下移动y个像素
- window.open()：既可以导航到一个特定的url，也可以打开一个新的浏览器窗口。
window.open('htttp://www.vue3js.cn','topFrame')
==> < a href=" " target="topFrame"></ a>
三、location
url地址如下：
http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents
| 属性名 | 例子 | 说明 |
|---|---|---|
| hash | “#contents” | url中#后面的字符，没有则返回空串 |
| host | www.wrox.com:80 | 服务器名称和端口号 |
| hostname | www.wrox.com | 域名，不带端口号 |
| href | http://www.wrox.com:80/WileyCDA/?q=javascript#contents | 完整url |
| pathname | “/WileyCDA/” | 服务器下面的文件路径 |
| port | 80 | url的端口号，没有则为空 |
| protocol | http: | 使用的协议 |
| search | ?q=javascript | url的查询字符串，通常为？后面的内容 |
- 除了hash之外，只要修改location的一个属性，就会导致页面重新加载新URL
- location.reload()，此方法可以重新刷新当前页面。这个方法会根据最有效的方式刷新页面，如果页面自上一次请求以来没有改变过，页面就会从浏览器缓存中重新加载
- 如果要强制从服务器中重新加载，传递一个参数true即可。
四、navigator
navigator 对象主要用来获取浏览器的属性，区分浏览器类型。属性较多，且兼容性比较复杂
下表列出了navigator对象接口定义的属性和方法：
五、screen
保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度
六、history
history对象主要用来操作浏览器URL的历史记录，可以通过参数向前，向后，或者向指定URL跳转
常用的属性如下：
- history.go()：接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转，当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面
history.go('maixaofei.com')
- history.forward()：向前跳转一个页面
- history.back()：向后跳转一个页面
- history.length：获取历史记录数
【前端知识之JS】BOM的理解相关推荐
- 【前端知识之JS】如何实现上拉加载和下拉刷新
前言 本系列主要整理前端面试中需要掌握的知识点.本节介绍如何实现上拉加载和下拉刷新. 文章目录 前言 一.介绍 二.实现原理 1.上拉加载 2.下拉刷新 一.介绍 下拉刷新和上拉加载这两种交互方式通常 ...
- 【前端知识之JS】JS本地存储
前言 本系列主要整理前端面试中需要掌握的知识点.本节介绍本地存储的四种方式,以及他们的比较和应用. 文章目录 前言 一.本地存储的方式 1.cookie 2.localStorage 3.sessio ...
- 【前端知识之JS】JS内存泄漏
前言 本系列主要整理前端面试中需要掌握的知识点.本节介绍JS中内存泄漏的几种情况 . 文章目录 前言 一.什么是内存泄漏 二.垃圾回收机制 1.标记清除--JS最常用的垃圾回收机制 2.引用计数 三. ...
- 【前端知识之JS】JS如何实现继承
前言 本系列主要整理前端面试中需要掌握的知识点.本节介绍JS如何实现继承. 文章目录 前言 一.什么是继承 二.实现方式 1. 原型链继承 2. 构造函数继承 3. 组合继承 4. 原型式继承 5. ...
- 前端入门：JS -- BOM (JS执行机制) P10121896-10121916
BOM 浏览器对象模型 1.概述 BOM提供了与浏览器窗口进行交互的对象: BOM的一系列对象都有很多方法和属性,其中顶级对象是window: document 包含在 window 中,所以 DOM ...
- 前端知识：JS内存泄漏
目录 一.什么是内存泄漏 二.垃圾回收机制 1.标记清除--JS最常用的垃圾回收机制 2.引用计数 三.常见的内存泄漏情况 1.意外的全局变量 2.定时器 3.闭包 4.没有清理DOM元素 一.什么是 ...
- web前端知识梳理——js
1 图片轮播 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
- 前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
最新文章
- CSMAR database query sample
- python基本命令range_Python的Range()函数（指南）
- 微信手机 WeOS 的可行性到底有多大？
- 阿里云云盾·Web应用防火墙 获“2018网络安全创新产品（技术）评选”一等奖
- 你们知道我们山东考生是怎么过来的么！山大校长写给你！
- 管理感悟：工作计划的作用
- 聊聊rocketmq的SequenceProducerImpl
- 【69元】茗振 捶打按摩披肩100种模式 颈肩颈椎按摩器 腰部敲敲乐
- 唱响艾泽拉斯_综合篇
- python中等高线填充颜色_Matplotlib：使用透明颜色填充等高线图
- strpos php 中文,php strpos是什么
- c#日期转换英文月份
- 角度前方交会点坐标计算完整步骤
- Homework02
- GPU Skinning旋转指定骨骼
- word如何给数学公式编号
- 计算机应用研究是什么期刊,发表一篇计算机应用研究期刊论文要多久？
- 电路仿真软件LTspice 使用教程
- 社保系列7《PSAM卡》
- java 日期转换视频_自定义转换器实现日期转换_JavaEE框架(Maven+SpringMvc+Spring+MyBatis)全程实战教程_Java视频-51CTO学院...