Melonico
2021-03-15
538
blog
原创

JavaScript——BOM浏览器对象模型

@[TOC]

BOM

什么是BOM

BOM(Browser Object Model) 是指浏览器对象模型，将浏览器的各个组成部分封装为对象 在这里插入图片描述

组成

一. 窗口对象 Window

Window 对象表示浏览器中打开的窗口

○ 方法
- 弹出框相关

① alert()：显示带有一条指定消息和一个 OK 按钮的警告框

alert("Hello,world!");

在这里插入图片描述 ② confirm()：显示一个带有指定消息和 OK 及取消按钮的对话框

confirm("确定吗？");

在这里插入图片描述 如果用户点击确定按钮，该方法会返回true，如果点击取消则返回false

③ prompt()：显示可提示用户进行输入的对话框

prompt("请输入内容");

在这里插入图片描述 该方法会返回用户输入的内容

var msg = prompt("请输入内容");
alert(msg);
- 打开关闭相关

① open()：打开一个新的浏览器窗口,并返回一个新的window对象

open("http://wwww.baidu.com");

② close()：用于关闭当前浏览器窗口

close();
- 定时器相关

-- 单次定时器

① setTimeout()：在指定的毫秒数后调用函数或计算表达式，并返回一个id值

setTimeout(code,millisec)

参数code为JS代码或对象，millisec为毫秒值

// 只会弹出一次警告框
setTimeout("alert('Timeout')",2000);

setTimeout(Timeout,2000);
function Timeout() {
    alert("Timeout");
}

② clearTimeout()：取消由 setTimeout() 方法设置的 timeout

clearTimeout(id_of_settimeout)

参数 id_of_settimeout 为 setTimeout() 方法返回的 id 值

var id = setTimeout(Timeout,2000);
clearTimeout(id);
clearTimeout()
function Timeout() {
    alert("Timeout");
}

-- 循环定时器

① setInterval()：按照指定的周期来调用函数或计算表达式，并返回一个id值

参数与 setTimeout() 方法相同

// 每隔2秒弹出一次警告框
setInterval("alert('Timeout')",2000);

setInterval(Timeout,2000);
function Timeout() {
    alert("Timeout");
}

② clearInterval()：取消由 setInterval() 设置的 timeout

参数与clearTimeout()相同

var id = setInterval(Timeout,2000);
clearInterval(id);
function Timeout() {
    alert("Timeout");
}
○ 属性
- 获取其他BOM对象

① history

② location

③ navigator

④ screen

var obj = window.history;
document.write(obj); //输出 [object History]

obj = window.location;
document.write(obj); //输出当前浏览器地址栏内地址

obj = window.screen;
   document.write(obj); //输出 [object Screen]

obj = window.navigator;
document.write(obj); //输出 [object Navigator]
- 获取DOM对象

document

window.document.write("hello");
○ 特点

  • Window对象不需要创建，可以直接使用

  • window引用可以省略，可以直接使用方法名调用方法

二. 浏览器对象 Navigator

Navigator 对象包含有关浏览器的信息

○ 属性

属性 描述
appName 当前浏览器名称
appVersion 当前浏览器平台和版本
browserLanguage 当前浏览器语言

三. 显示器屏幕对象 Screen

Screen 对象包含有关客户端显示屏幕的信息

○ 属性

属性 描述
availHeight 除Windows任务栏之外的显示器屏幕高度
availWidth 除Windows任务栏之外的显示器屏幕宽度
height 显示器屏幕高度
width 显示器屏幕宽度

四. 历史记录对象 History

History 对象包含用户（在浏览器窗口中）访问过的 URL

○ 属性：length——声明了浏览器历史列表中的元素数量

○ 方法

方法 描述
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go() 加载 history 列表中的某个具体页面

五. 地址栏对象 Location

Location 对象包含有关当前 URL 的信息

○ 方法

① reload()：重新加载当前文档（刷新页面）

点击按钮刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reload</title>
</head>
<body>
    <input id="btn" type="button" value="Reload">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        location.reload();
    }
</script>
</body>
</html>
○ 属性

① href：设置或返回当前显示的文档的完整 URL

document.write(location.href); //输出当前页面的URL
location.href = "http://www.baidu.com"; //设置新的URL
JavaScript
赞
  • 作者：Melonico
  • 发表时间：2021-03-15 17:36
  • 更新时间：2021-03-15 17:36

评论

暂无评论，快来发表第一个评论吧!
留言
TOP