JavaScript BOM 浏览器对象模型

简介: JavaScript BOM 浏览器对象模型

BOM,即浏览器对象模型,提供了与浏览器交互的对象。这些对象包括窗口(Window)、导航器(Navigator)、位置(Location)、历史记录(History)等。以下是一些关于JavaScript BOM的详细代码示例:

1.窗口对象

javascript// 获取窗口的宽度和高度
var width = window.innerWidth;
var height = window.innerHeight;
 
// 获取浏览器窗口的滚动条位置
var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
 
// 打开新窗口
window.open('http://www.example.com', '_blank');

2.导航器对象

javascript// 获取当前页面的URL
var currentURL = window.location.href;
 
// 获取URL的路径名、查询字符串等部分
var pathname = window.location.pathname;
var search = window.location.search;

3.位置对象

javascript// 获取当前页面的URL
var currentURL = window.location.href;
 
// 获取URL的路径名、查询字符串等部分
var pathname = window.location.pathname;
var search = window.location.search;

4.历史对象

javascript// 前进到历史记录中的下一页
window.history.forward();
 
// 回到历史记录中的前一页
window.history.back();

5.屏幕对象

javascript// 获取屏幕的宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;

6.事件处理

javascript// 添加事件监听器,例如点击事件
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了!');
});


相关文章
|
4天前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
4天前
|
前端开发 JavaScript Java
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
Java与JavaScript的区别与联系:有人的地方就有江湖,有浏览器的地方就有JavaScript
|
3天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
8 0
|
3天前
|
前端开发 JavaScript
前端 js 经典:原型对象和原型链
前端 js 经典:原型对象和原型链
14 1
|
3天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
4天前
|
JSON JavaScript 前端开发
js将json字符串还原为json对象
【5月更文挑战第14天】js将json字符串还原为json对象
27 1
|
4天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
4天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
10月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
|
11月前
|
JavaScript 前端开发