JS---BOM：Browser Object Model 浏览器对象模型

最新推荐文章于 2024-04-06 09:36:55 发布

qiudonga

最新推荐文章于 2024-04-06 09:36:55 发布

阅读量252

点赞数

分类专栏：前端 JavaScript 文章标签： js window对象 js Histroy对象 Loacation对象

本文链接：https://blog.csdn.net/qq_42488087/article/details/98482673

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

JS BOM：Browser Object Model 浏览器对象模型（将浏览器的各个组成部分封装成对象）

组成：浏览器对象、显示屏对象Screen、window窗口对象、历史纪录对象History、地址栏对象Location(浏览器和显示屏对象不常用)

window窗口对象里还包括DOM的Document对象。

[外链图片转存失败(img-nrxYvwHK-1564982844488)(D:\csdn博客\web\前端&html&css&js\图片\BOM 图解.png)]

window窗口对象：不用创建，可以window.方法名()，也可以直接方法名()调用

与弹框有关的方法：

1.alert():显示带一段消息的和一个确认按钮的警告框

window.alert("只是警告框");

2.confirm()：显示带一段消息的以及确认、取消按钮的对话框

* 如果用户点击确认按钮，则方法返回true

*如果用户点击取消按钮，则方法返回flase

confirm("confirm");

3.promet():显示可提示用户输入的对话框,返回用户输入的值

prompt("请输入用户名");

与打开关闭有关的方法

1.open():打开新的页面，不传参数默认打开空的页面，返回的是一个window对象

var openButton = document.getElementById("_id");
openButton.onclick = function(){
    newWindow = open("http://www.baidu.com");  //打开百度首页
}

2.close():关闭页面，谁调用他，就关闭谁

var newWindow
var openButton = document.getElementById("_id");
var closeButton = document.getElementById("_id2");
openButton.onclick = function(){
    newWindow = open("http://www.baidu.com");     //打开百度首页
}
closeButton.onclick = function(){
    newWindow.close();   //关闭这个百度首页
}

与定时器有关的方法：

1.setTimeout() 在指定的毫秒数后调用函数或计算表达式，返回唯一标识，用于取消定时器

2.clearTimeout() 取消定时

var id = setTimeout("fun()",3000);  //在3秒后调用fun()方法，也可以var id = setTimeout(fun,3000);
function fun(){
    alert('sss')
}
clearTimeout(id);  //取消定时

3.setInterval():在指定的毫秒数后循环调用函数或计算表达式，返回唯一标识，用于取消定时器

4.clearInterval() 取消定时

var id = setTimeout(fun,3000);  //在3秒后循环调用fun()方法，
function fun(){
    alert('sss')
}
clearTimeout(id);   //取消定时

window对象属性：

1.获取其他BOM对象：history、location、Navigator、Screen

var a = window.history;
var b =history;

2.获取DOM对象：document

window.document.getElementById();

location对象：地址栏对象

方法：reload():重新加载页面，刷新页面

var btn = document.getElementById("_id");   //根据id获取标签
btn.onclick = function(){
location.reload();  //刷新页面
}

属性：href:获取当前url地址，或者访问某个url地址

获取当前url地址

var btn2 = document.getElementById("_id2");
btn2.onclick = function(){
    var href = location.href  //获取当前url地址
    alert(href);
}

访问某个url地址

var btn2 = document.getElementById("_id2");
btn2.onclick = function(){
    location.href = "https:www.baidu.com";   //访问百度
}

history对象:浏览历史对象(是代表当前window窗口的历史记录)

方法：

forword():加载history列表中的下一个页面

<body>
    <input id="btn2" type="button" value="前进" />
    <script>
		var btn2 = document.getElementById("btn2");
		btn2.onclick = function(){
    		history.forward();   //加载历史纪录的下一个界面
		}
    </script>
</body>

back():加载history列表中的上一个界面

<body>
    <input id="btn2" type="button" value="后退" />
    <script>
		var btn2 = document.getElementById("btn2");
		btn2.onclick = function(){
    		history.back();   //加载历史纪录的上一个界面
		}
    </script>
</body>

go(number|url)：number参数是访问url在hisrory列表中的相对位置；url参数是访问制定的url

</head>
<body>

<input type="button" value="Back" onclick="goBack()" />
	<script type="text/javascript">
		function goBack() {
  			window.history.go(-1)；   //加载前一个界面
 		 }
</script>
</body>

属性：length:返回当前窗口浏览记录的个数

<input id="btn" type="button" value="历史个数" />
    <script>
    	var btn = document.getElementById("btn");
		btn.onclick = function(){
    	alert(history.length);    //弹出浏览记录的个数
		}
    </script>

qiudonga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS---BOM：Browser Object Model 浏览器对象模型

JS BOM：Browser Object Model 浏览器对象模型（将浏览器的各个组成部分封装成对象）组成：浏览器对象、显示屏对象Screen、window窗口对象、历史纪录对象History、地址栏对象Location(浏览器和显示屏对象不常用)window窗口对象里还包括DOM的Document对象。[外链图片转存失败(img-nrxYvwHK-1564982844488)(D:\c...
复制链接

扫一扫