JavaScript---BOM对象

Posted 2020-12-25 Horror

1、BOM简介

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

使 javascript 有能力与浏览器“对话”。

2、window 对象

1 window对象
2     所有浏览器都支持 window 对象。
3     概念上讲.一个html文档对应一个window对象.
4     功能上讲: 控制浏览器窗口的.
5     使用上讲: window对象不需要创建对象,直接使用即可.

window 对象方法：

 1 alert()            显示带有一段消息和一个确认按钮的警告框。
 2 confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
 3 prompt()           显示可提示用户输入的对话框。
 4 
 5 open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
 6 close()            关闭浏览器窗口。
 7 setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
 8 clearInterval()    取消由 setInterval() 设置的 timeout。
 9 setTimeout()       在指定的毫秒数后调用函数或计算表达式。
10 clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
11 scrollTo()         把内容滚动到指定的坐标。

交互方法：

 1 方法讲解:    
 2         //----------alert confirm prompt----------------------------
 3     //alert(‘aaa‘);
 4     
 5     
 6     /* var result = confirm("您确定要删除吗?");
 7     alert(result); */
 8 
 9     //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.
10 
11     // var result = prompt("请输入一个数字!","haha");
12     // alert(result);
13 
14 
15 
16     方法讲解:    
17         //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
18         //调用方式1
19             //open("http://www.baidu.com");
20         //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
21             open(‘‘,‘‘,‘width=200,resizable=no,height=100‘); // 新打开一个宽为200 高为100的窗口
22         //close方法  将当前文档窗口关闭.
23             //close();

View Code

setInterval clearInterval

 1 <input id="ID1" type="text" onclick="begin()">
 2 <button onclick="end()">停止</button>
 3 
 4 <script>
 5 
 6 
 7     function showTime(){
 8            var nowd2=new Date().toLocaleString();
 9            var temp=document.getElementById("ID1");
10            temp.value=nowd2;
11 
12     }
13 
14     var clock;
15 
16     function begin(){
17 
18         if (clock==undefined){
19 
20              showTime();
21              clock=setInterval(showTime,1000);
22 
23         }
24 
25     }
26 
27     function end(){
28 
29         clearInterval(clock);
30     }
31 
32 </script>

View Code

setTimeout clearTimeout

1 var ID = setTimeout(abc,2000); // 只调用一次对应函数.
2             clearTimeout(ID);
3     function abc(){
4         alert(‘aaa‘);
5     }

View Code

3、history 对象

History 对象属性

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

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

1 length  返回浏览器历史列表中的 URL 数量。

History 对象方法

1 back()    加载 history 列表中的前一个 URL。
2 forward()    加载 history 列表中的下一个 URL。
3 go()    加载 history 列表中的某个具体页面。

1 <a href="rrr.html">click</a>
2 <button onclick=" history.forward()">>>></button>
3 <button onclick="history.back()">back</button>
4 <button onclick="history.go()">back</button>

Demo

4、Location 对象

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

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象方法

1 location.assign(URL)
2 location.reload()
3 location.replace(newURL)//注意与assign的区别