前端培训-中级阶段(4)- BOM浏览器对象模型(2019-07-04期)

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。前面我们已经基本掌握常规的语法语义,以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。上一节,我们聊了聊 BOM对象。这节我们来了解一下 BOM对象(浏览器对象)。BOM对象其实就是我们的 window对象

我们要讲什么?


  1. BOM对象是什么?


  1. BOM对象上的属性


BOM对象是什么?


BOM(Browser Object Model)中文浏览器对象模型。


表示一个包含 DOM文档的窗口。提供了与浏览器窗口进行交互的对象

标签之间不会共享。


window 对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;


bVbt5RT.webp.jpg


BOM对象上的属性


document


指向窗口中载入的 DOM文档(document.defaultView 属性可以获取指定文档所在窗口。)


console


提供了对浏览器调试控制台的访问。


  1. 低版本IE米有
  2. 打印的对象,会造成内存泄露。线上尽可能不使用。


history


history对象的引用。用于描述当前浏览器的历史记录。


只提供了有限的 api。不提供访问,修改等操作。


  1. length 表示当前历史记录个数


  1. back() 后退


  1. forward() 前进


  1. go() 0 1 -1 等参数。


location


当前加载页面的url、端口、协议等信息。还可以对当前的窗口进行导航。


  1. href 获取或者设置,网页的url


  1. reload() true为放弃缓存刷新,默认为普通属性


  1. replace() 替换,不会再history留下记录


  1. assign() 等价于直接设置href


navigator


返回当前浏览器相关信息。包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。


screen


返回客户端屏幕参数。


frames


页面中其他 iframe 的引用


其他常用


  1. devicePixelRatio
    返回当前显示器的物理像素和设备独立像素的比例。


  1. fullScreen
    表示窗口是否以全屏显示。


  1. localStorage&sessionStorage
    本地存储


  1. opener
    返回对打开当前窗口的那个窗口的引用(open打开页面)


  1. performance
    检测网页加载速度


相关文章
|
1月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
41 0
|
2月前
|
JavaScript 前端开发 UED
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model,简称BOM)是JavaScript中用于操作浏览器窗口和与其相关对象的一种模型。BOM提供了一系列与浏览器窗口进行交互的对象,使得JavaScript可以对浏览器窗口进行控制和操作。其中最核心的对象是window对象,它代表了浏览器窗口本身。
17 1
|
12天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
34 7
|
1月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
1月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
54 0
|
2月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
|
2月前
|
开发框架 前端开发 机器人
从模型到前端,你应该知道的LLM生态系统指南
LLM在在2023年发展的风生水起,一个围绕LLM的庞大生态系统正在形成,本文通过介绍这个生态系统的核心组成部分,来详细整理LLM的发展。
166 2
|
2月前
|
缓存 前端开发 JavaScript
在浏览器的舞台上演:前端如何挑战页面刷新的极限
在浏览器的舞台上演:前端如何挑战页面刷新的极限
58 0
|
2月前
|
前端开发 JavaScript Java
前端(JavaScript)------函数与对象
前端(JavaScript)------函数与对象
54 0
|
3月前
|
Web App开发 前端开发 测试技术
性能测试分层模型以及前端性能测试工具介绍
性能测试分层模型以及前端性能测试工具介绍