JavaScript-BOM对象

最新推荐文章于 2023-05-03 13:27:21 发布
最新推荐文章于 2023-05-03 13:27:21 发布
阅读量628 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript safari chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xmosang/article/details/122707466
版权

Browser Object Model 浏览器对象模型

7.1、window

代表浏览器窗口

 window.alert(1)
 undefined
 window.innerHeight
 760
 window.innerWidth
 743
 window.outerHeight
 864
 window.outerWidth
 1536
 //获取浏览器的宽度和高度，根据调整随时发生改变

7.2、Navigator

封装了浏览器的信息

 navigator.appName//当前应用名
 'Netscape'
 navigator.appVersion//当前浏览器的版本号
 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
 sentry-5.7.1.min.js:2 [Violation] 'requestAnimationFrame' handler took 59ms
 navigator.userAgent//用户信息
 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
 navigator.platform//系统版本
 'Win32'

navigator对象一般不使用，因为其可以被为人为修改，所以无法通过这些属性来判断

7.3、screen

屏幕尺寸

 //获取屏幕大小
 screen.width
 1536
 screen.height
 864

7.4、location

当前页面的url信息

 

 host: "www.bilibili.com"// 主机
 href: "https://cn.bing.com/chrome/newtab"// 指向位置
 protocol: "https:"// 协议
 reload: ƒ reload() //重新加载  刷新网页
 location.assign('http://www.baidu.com')//设置新的跳转地址

7.5、document

代表当前页面 DOM对象

获取当前页面标题，可更改

 document.title
 '必应'
 document.title='百度'
 '百度'

获取文档树节点

 <body>
 <ll id="list">
     <li>java</li>
     <li>c++</li>
 </ll>
 </body>
 <script>
     var li=document.getElementById('list');
 </script>

获取cookie

 document.cookie//存储登录信息

7.6、history

浏览器的历史记录

 history.back()//前进
 history.forward()//后退

小墨Sang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript操作BOM对象.docx
07-05
本文档主要介绍了 JavaScript 操作 BOM（ Browser Object Model）对象的相关知识点，包括 window 对象、history 对象、location 对象、Document 对象、Math 对象和 Date 对象等。 window 对象 window 对象是 BOM ...
JavaScript中BOM对象原理与用法分析
12-11
本文实例讲述了JavaScript中BOM对象原理与用法。分享给大家供大家参考，具体如下： 百度百科 BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了...
vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 <N> 毫秒怎么解决...
weixin_42594427的博客
01-09 4009
这个警告通常是因为你的图表渲染过于复杂或者数据量过大，导致在浏览器的一帧内渲染超时。 你可以尝试以下方法来解决这个问题： 减少图表中的数据量，使其更加简单，从而减少渲染时间。 使用图表的 lazyUpdate 选项，可以让图表每隔一段时间重新渲染，从而减少每次渲染的数据量。 使用图表的 renderer 选项，可以指定使用 Canvas 或 SVG 渲染图表，这可以提升渲染性能。 对于大型...
vue使用echarts很卡 'requestAnimationFrame' handler took 64ms
weixin_42603332的博客
01-09 2222
vue使用echarts的时候, 如果出现"requestAnimationFrame handler took xxx ms"的提示, 表示当前的图表渲染所用的时间超过了浏览器规定的最长时间(通常是16.7ms), 导致图表的渲染卡顿. 这种情况通常是由于数据量过大, 导致渲染所用的时间过长. 解决方法有: 尽量减少数据量, 使图表渲染所用的时间尽可能短. 对于一些复杂的图表, 可以使用图表...
react ant design tree 虚拟滚动 导致Forced reflow
11-13 944
【代码】react ant design tree 虚拟滚动 导致Forced reflow。
谈requestAnimationFrame 理解
我仅仅是一个Coder
01-03 3217
传统的js动画是通过setTimeout循环调用实现。 setTimeout调用一次将引起页面的改变，即页面将重绘。 问题一，如果setTimeout调用频率过高会发生什么情况呢？ 杯具的16ms，在早期。js的callback执行，是依赖CPU的中断来进行控制的，如果两个中断之间时间太短会导致，CPU性能消耗很高，同时影响能耗，于是微软和英特公司为了解决这个问题，就约定每个中断
[Violation] ‘message‘ handler took 427ms
qq_2511276124的博客
12-06 4802
[Violation] 'mouseleave' handler took 237ms 解决违反事件执行时长警告的一些建议
Javascript之BOM(window对象)详解
10-22
JavaScript中的BOM（Browser Object Model，浏览器对象模型）主要处理与浏览器交互的接口，而其中的`window`对象是BOM的核心，它代表了浏览器的一个实例。`window`对象不仅充当JavaScript访问浏览器窗口的接口，同时...
实现JavaScript的组成—-BOM和DOM详解
01-19
我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页...
CesiumJS 2022^ 原理[1] 使用 requestAnimationFrame 循环触发帧动画
cmdos的专栏
04-06 1170
目录0. 前置约定本系列说明1. 开始1.1. CesiumWidget 类是控制场景对象触发渲染的调度器1.2. Scene 对象2. 三维地球哪来的？3. 本篇总结0. 前置约定对类的使用，不添加 Cesium 命名空间前缀，例如对于 Viewer，不会写 Cesium.Viewer，默认使用 ESM 格式解构导入类；JavaScript 代码使用最简格式（源码除外），不加分号，不用双引号，少注释，双空格缩进本系列说明 安徽干部培训学校 www.tjganxun.cn 佛系连载，想到什么写什么。2022
你所不知道的setInterval
weixin_34130389的博客
01-12 249
在你所不知道的setTimeout记载了下setTimeout相关,此篇则整理了下setInterval；作为拥有广泛应用场景(定时器，轮播图，动画效果，自动滚动等等)，而又充满各种不确定性的这setInterval，自当先洞悉它，才能很好的驾驭它。 如觉此处样式排版不尽人意，可移步首链晚晴幽草轩~你所不知道的setInterval 1. setInte...
requestAnimationFrame 方法你真的用对了吗？
weixin_34204057的博客
07-18 6001
requestAnimationFrame 方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道，不管三七二十一直接在 requestAnimationFrame 的回调函数里绘制动画会有一个问题。是什么问题呢？要理解这个问题，我们先要了解 requestAnimationFrame 的一个知识点。 requestAnimati...
requestAnimationFrame 介绍
zha_zi的专栏
04-09 574
转自http://www.zhangxinxu.com/wordpress/?p=3695   一、哟，requestAnimationFrame, 新同学，先自我介绍下 Hello, 大家好，我就是风姿卓越，万种迷人的requestAnimationFrame，呵呵呵呵。很高兴和大家见面，请多指教！ 。。。。 咳咳，大家不要一副不屑的样子嘛。跟你讲，我可是很有用的。所谓人如其名，看...
Vue项目中浏览器终端警告[Violation] ‘click‘ handler took 1137ms
热门推荐
大牛的博客
08-18 1万+
出现这种问题怎么办呢? 1.首先理解报错的意思 2.找到出错的位置 3根据警告提示来找错 解决 这个警告说的是单击处理程序耗时太长了 然后去找报错的位置,一般在后面都会跟着位置在哪一行,但是我很幸运的没有,这就很难受,只能自己找,既然是单击事件,那肯定是在我做了单击之后报的错,看了一下代码如下 <el-button size="small" type="primary" @click="submitForm">确定</el-button> submit...
大数据量加载的页面性能问题requestAnimationFrame
MyBlog
12-31 1972
大数据量加载页面渲染的性能比对 一、准备 先代码地址吧 代码地址 1、新建文件夹 mkdir bigdata 2、cd bigdata 进入文件夹 3、初始化package.json npm init -y { "name": "bigdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified
浅谈浏览器动画与requestAnimationFrame
mxydl2009的博客
02-14 303
浏览器动画的实现是通过在一定频率下重新渲染得到的，每一帧都间隔相同的时间。在CSS动画中，浏览器知道动画的开始和每一帧的时间间隔，所以动画的效果很流畅。但在用JS实现的动画中，一般用定时器实现时，存在着时间间隔并不可靠的问题，如果线程里有其他任务存在，定时器执行任务的时间间隔并不一定能保证是自己设定的数值；这样容易导致动画产生延迟停滞，效果大打折扣； 为了解决这个问题，引入了requestAn...
requestAnimationFrame，读懂这篇文章就够了
知之为知之，不知为不知
05-03 1194
requestAnimationFrame 请求动画帧； 它是一个浏览器的宏任务； requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
JavaScript的BOM
最新发布
05-10
BOM（浏览器对象模型）是指浏览器提供的一组对象，它们可以访问和控制浏览器窗口，比如location、navigator、history、screen等对象，通过这些对象可以获取或修改浏览器窗口的URL、浏览器信息、浏览历史记录、屏幕尺寸等信息。BOM的核心对象是window对象，它表示整个浏览器窗口。通过window对象可以访问和控制BOM的其他对象。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值