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 还提供了更多的方法和对象,用于与浏览器进行交互。


相关文章
|
28天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
133 59
|
5天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
17 2
|
5天前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
22 1
|
5天前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
18 1
|
7天前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
10 1
|
21天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
23天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
30 2
|
23天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
11 0
JS之concat方法
|
3天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
19 0
|
3天前
|
JavaScript 前端开发
js关于时间的方法
js关于时间的方法
9 0