BOM常用属性与方法

最新推荐文章于 2022-09-25 19:28:30 发布
最新推荐文章于 2022-09-25 19:28:30 发布
阅读量3.1k 收藏 9
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/williamgavin/article/details/79143822
版权

BOM(Browser Object Model)

是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 – 百度百科

主要包括以下几个：
这里写图片描述

window（浏览器窗口）

浏览器窗口对象，主要属性有：

  • name：指浏览器窗口的名字或框架的名字。这个名字是给a标记的target属性来用的。设置窗口的名字：window.name = “newWin” 获取窗口的名字：document.write(name);
  • top：代表最顶层窗口。如：window.top
  • parent：代表父级窗口，主要用于框架。
  • self：代表当前窗口，主要用于框架中。
  • innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性chrome支持。
    在IE下，使用
 document.documentElement.clientWidth  来代替 window.innerWidth

  • innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性chrome支持。
    在IE下，使用 

    document.documentElement.clientHeight  来代替
window.innerHeight

    举例：
    document.documentElement 就是html标记对象
    document.body 就是标记对象

window方法
  • alert()：弹出一个警告对话框。
  • prompt([text],[defaulttext])：弹出一个输入对话框。
  • confirm(text)：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取* * 消”返回false。 text：要显示的纯文本
  • close()：关闭窗口
  • print()：打印窗口
  • open([url],[name],[options]):打开一个新窗口
  • 延时器：window.setTimeout(“code”,1000);// code一般是一个函数，但是放在双引号下，1000ms
    返回值是延时器的id，给clearTimeout使用
  • 定时器：window.setInterval(“code”,1000);// code一般是一个函数，但是放在”“下，1000ms
    返回值是定时器的id，给clearInterval使用

location

location常用属性
  • href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
  • host：主机名
  • hostname：主机名
  • pathname：文件路径及文件名
  • search：查询字符串。
  • protocol：协议，如：http://、ftp://
  • hash：锚点名称。如：#top
  • reload([true])：刷新网页。true参数表示强制刷新

注意：所有的属性，重新赋值后，网页将自动刷新

screen（显示器屏幕）

screen常用属性：
  • Width：屏幕的宽度，只读属性。
  • Height：屏幕的高度，只读属性。
  • availWidth：屏幕的有效宽度，不含任务栏。只读属性。
  • availHeight：屏幕的有效高度，不含任务栏。只读属性。
  • appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
    如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
    如果是Firefox浏览器的话，返回值为：Netscape
  • appVersion：浏览器软件的核心版本号。
  • systemLanguage：系统语言
  • userLanguage：用户语言
  • platform：平台

history（浏览历史）

history常用属性
  • length：历史记录的个数
history常用方法
  • go(n)：同时可以实现“前进”和“后退。”
    1. history.go(0) 刷新网页
    2. history.go(-1) 后退
    3. history.go(1) 前进一步
    4. history.go(3) 前进三步
  • forward()：相当于浏览器的“前进”按钮
  • back()：相当于浏览器的“后退”按钮

    文章参考于：
williamgavin
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端开发技术-BOM其他对象.pptx
07-07
BOM其他对象; location对象;BOM其他对象;location常用属性：;location常用属性：; 【案例】获取URL参数 ; 【案例】获取URL参数 ; location的常用方法 ; navigator对象;BOM其他对象; history对象;常用方法：;
c认证web进阶dom与bom
10-03
ID和CLASS的区别 DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、通过style属性控制样式 2、通过classList控制样式 背景更换 背景色更换 节点写入 1、节点写入常用方式 事件基础 1、节点写入常用方式 2、事件绑定 案例 监听器 更改样式 事件自增 鼠标事件 1、常用鼠标事件 2、常用键盘事件 3、常用键盘事件属性 this使用输出本身 同上 弹窗 窗口事件 1、常用鼠标事件 过程 BOM 1、BOM结构 2、window对象 3、location对象 4、history对象 5、navigator对象 6、screen对象 导航栏顶部返回 刷新页面 BOM定时器 1、定时器方法 等待几秒后蹦出弹窗 检查是否支付，成功蹦弹窗 清除定时器1 清除定时器2 思考为什么是这个水果 ————————————
bom浏览器对象模型
09-13
bom浏览器对象模型,bom的一些常用属性跟方法，便于大家学习
利用allegro导出BOM
11-23
利用allegro导出BOM,可以导出各种需要的属性，而不只是默认的属性，比如常用的有Part Number，位号等
你真的了解BOM中的history对象吗
12-03
前面的话 　　history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于安全方面的考虑，开发人员无法得到用户浏览器的URL，但借由用户访问过的页面列表，可以在不知道实际URL的情况下实现后退和前进。本文将详细介绍BOM中的history对象 length 　　history.length属性保存着历史记录的URL数量。初始时，该值为1。如果当前窗口先后访问了三个网址，history.length属性等于3 　　由于IE10+浏览器在初始时返回2，存在兼容性问题，所以该值并不常用 history.length // 初始时，该值为1 history.length // 访问
BOM 属性、方法、事件应用
qq_60012576的博客
06-21 843
bom 属性 方法
DOM操作
诺一的博客
06-09 204
DOM操作
常用的BOM属性 - Kaiqisan
Kaiqisan的博客
02-23 672
location history navigitor BOM
javaScript Bom的介绍及使用方法
and_maple的博客
04-19 399
javaScript Bom基础概述
BOM属性 事件对象
x0572_的博客
09-25 196
BOM属性 事件对象
浅谈JS中的常用选择器及属性、方法的调用
10-19
5. BOM（浏览器对象模型）：BOM允许JavaScript与浏览器窗口进行交互，如`document.body`提供了对整个HTML `<body>`元素的访问。 在实际开发中，这些选择器和方法的组合使用使得我们可以精确地选取和操作页面上的...
JS中的BOM应用
10-18
**二、BOM中的常用方法和属性** 2. **document.write()** - `document.write()` 可以用来向HTML文档流中写入内容。当在文档加载完成后调用，它会清除现有页面并插入新内容。例如，点击按钮后，页面会被清空并显示...
javascript的BOM汇总
10-23
`document.body.clientHeight`, `window.innerHeight`, `document.documentElement.clientHeight`, `document.documentElement.scrollHeight`, 和 `document.documentElement.scrollTop`: 这些属性与页面内容和视口...
web API- BOM.pdf
10-17
下面将详细讨论BOM中的关键概念和常用方法。 ### 1. `setTimeout` 和 `clearTimeout` `setTimeout` 函数用于在指定的毫秒数后调用一个函数或者执行某段代码。这是一个非常基础且常用的异步编程技术。例如： ```...
什么是Bom，常用的bom属性又有哪些？
Hy_0452的博客
03-14 1213
Bom 是浏览器对象。 有哪些常用的 Bom 属性呢? (1)]location 对象location.href-- 返回或设置当前文档的 URL location.search – 返回 URL 中的查询字符串部分。例如http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu location.hash – 返回 URL#后面的内容,如果没有#,返回空location.host –
21.BOM的理解，常见的BOM对象你了解哪些？
kleinBlue.的博客
10-20 746
了独立于内容与浏览器窗口进行交互的对象 其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退，前进，刷新，浏览器的窗口发生变化，滚动条的滚动，以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率 浏览器的全部内容可以看成DOM，整个浏览器可以看成BOM。区别如下： 二、window Bom的核心对象是window，它表示浏览器的一个实例 在浏览器中，window对象有双重角色，即是浏览器窗口的一个接口，又是全局对象 因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方
BOM属性对象方法
飞翔的熊blabla
04-11 387
本文原链接：https://cloud.tencent.com/developer/article/1018747 BOM 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还...
27、BOM的属性对象方法
y_xiuzhu的博客
03-18 731
27.1 BOM的属性对象方法 BOM（浏览器对象模型）的对象用于访问浏览器的功能，提供了当前窗口中加载的文档有关的信息，和一些导航功能。 BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window BOM由一些列相关对象构成，并且每个对象提供 很多方法与属性 BOM缺乏标准，javascript 语法的标准组织是ECMA，DOM的标准组织是W3C BOM 最初是Netscape 浏览器标准的一部分 window对象 ：表示浏览器窗口，是JS的顶层对象。 location对象：浏览器当
什么是Bom?有哪些常用的Bom属性
qq_34639706的博客
11-12 1927
Bom是浏览器对象 常用的Bom属性： location对象 location.href-- 返回或设置当前文档的URL location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd… 返回包括(?)后面的内容?id=5&name=dreamdu location.hash – 返回URL#后面的内容，如果没有#，返回空 location.host – 返回URL中的域名部分，例如http://www.dreamdu.com lo
javascript使用以下知识点进行网页设计和js特效并写出代码1、 常用鼠标与键盘事件 2、 事件对象的绑定与使用 3、 排他操作 4、 Bom获取窗体属性 5、 Bom相关属性的使用 6、 Bom相关方法的使用 7、 Offset的使用 8、
最新发布
06-03
DOM节点的操作和属性 1. 常用鼠标与键盘事件： ```javascript // 鼠标事件 element.addEventListener('click', function(event) { // 点击事件 }); element.addEventListener('mousedown', function(event) { // 按下鼠标键事件 }); element.addEventListener('mouseup', function(event) { //开鼠标键事件 }); element.addEventListener('mousemove', function(event) { // 鼠标移动事件 }); element.addEventListener('mouseover', function(event) { // 鼠标移入事件 }); element.addEventListener('mouseout', function(event) { // 鼠标移出事件 }); // 键盘事件 element.addEventListener('keydown', function(event) { // 按下键盘事件 }); element.addEventListener('keyup', function(event) { // 松开键盘事件 }); element.addEventListener('keypress', function(event) { // 按键事件 }); ``` 2. 事件对象的绑定与使用： ```javascript element.addEventListener('click', function(event) { // 阻止默认行为 event.preventDefault(); // 阻止事件冒泡 event.stopPropagation(); // 获取事件目标 event.target; // 获取事件类型 event.type; // 获取触发事件的元素 event.currentTarget; }); ``` 3. 排他操作： ```javascript const elements = document.querySelectorAll('.item'); elements.forEach(function(element) { element.addEventListener('click', function(event) { // 移除所有元素的 active 类 elements.forEach(function(item) { item.classList.remove('active'); }); // 添加当前元素的 active 类 element.classList.add('active'); }); }); ``` 4. Bom获取窗体属性： ```javascript // 获取窗口宽度 window.innerWidth; // 获取窗口高度 window.innerHeight; // 获取文档宽度 document.documentElement.clientWidth; // 获取文档高度 document.documentElement.clientHeight; ``` 5. Bom相关属性的使用： ```javascript // 获取当前页面的url window.location.href; // 获取当前页面的域名 window.location.hostname; // 获取当前页面的路径 window.location.pathname; // 获取当前页面的协议 window.location.protocol; ``` 6. Bom相关方法的使用： ```javascript // 跳转到指定url window.location.href = 'https://www.example.com'; // 刷新页面 window.location.reload(); // 后退一页 window.history.back(); // 前进一页 window.history.forward(); ``` 7. Offset的使用： ```javascript // 获取元素距离文档顶部的距离 element.offsetTop; // 获取元素距离文档左侧的距离 element.offsetLeft; // 获取元素的宽度 element.offsetWidth; // 获取元素的高度 element.offsetHeight; ``` 8. DOM节点的操作和属性： ```javascript // 创建元素节点 const element = document.createElement('div'); // 设置元素属性 element.setAttribute('id', 'my-div'); element.setAttribute('class', 'my-class'); // 获取元素属性 element.getAttribute('id'); element.getAttribute('class'); // 添加元素到文档中 document.body.appendChild(element); // 删除元素 document.body.removeChild(element); // 获取元素的子元素 element.children; // 获取元素的父元素 element.parentNode; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值