javascript操作BOM的方法

简介: javascript操作BOM的方法

BOM(Browser Object Model)是浏览器对象模型,它提供了独立于任何特定文档的对象,用于浏览器窗口和浏览器窗口中的脚本之间的交互。以下是一些常用的 JavaScript 操作 BOM 的方法:

1.window.alert()

弹出一个警告框,显示指定的文本和 OK 按钮。

window.alert("这是一个警告框!");

2.window.confirm()

弹出一个带有确定和取消按钮的对话框,并返回用户的选择(true 或 false)。

var result = window.confirm("你确定要继续吗?");  
if (result) {  
    console.log("用户点击确定");  
} else {  
    console.log("用户点击取消");  
}

3.window.prompt()

弹出一个带有文本输入字段和确定及取消按钮的对话框,并返回用户输入的文本(如果用户点击确定)或 null(如果用户点击取消)。

var name = window.prompt("请输入你的名字", "Harry Potter");  
console.log("你好," + name + "!");

4.window.location()

用于获取或设置窗口的 URL,并可以解析 URL 的各个组成部分。

// 设置窗口的 URL  
window.location.href = "https://www.example.com";  
  
// 获取当前 URL  
var currentURL = window.location.href;  
console.log(currentURL);  
  
// 获取 URL 的各个部分  
var hostname = window.location.hostname; // example.com  
var pathname = window.location.pathname; // /path/to/page.html  
var search = window.location.search; // ?query=string  
var hash = window.location.hash; // #section

5.window.navigator()

包含有关浏览器的信息。

var browserName = window.navigator.appName;  
var browserVersion = window.navigator.appVersion;  
console.log("浏览器名称:" + browserName);  
console.log("浏览器版本:" + browserVersion);

6.window.screen()

包含有关客户端屏幕的信息。

var screenWidth = window.screen.width;  
var screenHeight = window.screen.height;  
console.log("屏幕宽度:" + screenWidth);  
console.log("屏幕高度:" + screenHeight);

7.window.history()

允许脚本与浏览器的历史记录进行交互。

// 后退一页  
window.history.back();  
  
// 前进一页  
window.history.forward();  
  
// 加载历史列表中的特定页面  
window.history.go(n); // n 为要加载的页面在历史列表中的相对位置

8.window.setTimeout() 和 window.clearTimeout()

用于在指定的毫秒数后执行函数,或取消之前设置的定时器。

// 设置定时器  
var timerId = window.setTimeout(function() {  
    console.log("5 秒后执行此函数");  
}, 5000);  
  
// 取消定时器  
window.clearTimeout(timerId);

9.window.setInterval() 和 window.clearInterval()

用于每隔指定的毫秒数重复执行函数,或取消之前设置的间隔定时器。

// 设置间隔定时器  
var intervalId = window.setInterval(function() {  
    console.log("每秒执行此函数");  
}, 1000);  
  
// 取消间隔定时器  
window.clearInterval(intervalId);

以上只是 BOM 的一部分功能,实际上 BOM 还提供了更多的方法和对象,用于与浏览器进行交互。


相关文章
|
4天前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
20 7
|
4天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
13 3
|
1天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
5 0
|
1天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
9 2
|
1天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
7 1
|
2天前
|
JavaScript 前端开发
JS中正则方法的使用 - 蓝易云
以上就是JavaScript中正则方法的基本使用。这些方法可以用于执行复杂的字符串处理和验证任务。
13 1
|
2天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
2天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
2天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!