JavaScript之BOM对象

BOM对象

一、概念

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

简单来说，BOM作用就是使JavaScript有能力与浏览器“对话”。

二、Window对象

  • 所有浏览器都支持window对象；
  • 概念上讲：一个html文档对应一个window对象；
  • 功能上讲：控制浏览器窗口；
  • 使用上讲：window对象不需要创建对象，直接使用即可。

Window对象方法如下：

 1 alert()  显示带有一段消息和一个确人按钮的警告框
 2 confirm()  显示带有一段消息以及确认按钮和取消按钮的对话框
 3 prompt()  显示可提示用户输入的对话框
 4 open()  打开一个新的浏览器窗口或查找一个已命名的窗口
 5 close()  关闭浏览器窗口
 6 setInterval()  按照指定的周期(以毫秒计)来调用函数或计算表达式
 7 clearInterval()  取消由setInterval()设置额timeout
 8 setTimeout()  在指定的毫秒数后调用函数或计算表达式
 9 clearTimeout()  取消由setTimeout()方法设置的timeout
10 scrollTo()  把内容滚动到指定的坐标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>

<input type="text" id="id1" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    function showTime(){
        var current_time = new Date().toLocaleString();
        var ele = document.getElementById('id1');
        ele.value=current_time;
    }
    var clock1;
    function begin(){
        if(clock1==undefined){
            showTime();
            clock1 = setInterval(showTime,1000);
        }

    }
    function end(){
        clearInterval(clock1);
        clock1=undefined;
    }
</script>


</body>
</html>
举例

三、History对象

  • History对象包含用户(在浏览器窗口中)访问过的URL；
  • History对象是Window对象的一部分，可通过Window.history属性对其访问。

History对象属性方法如下：

1 length：返回浏览器历史列表中的URL数量
2 back()：加载history列表中的前一个URL
3 forward()：加载history列表中的下一个URL
4 go()：加载history列表中的某个具体页面
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <a href="js_history1.html">click</a>
10 
11 <!--<button onclick="history.forward()"> >>>>></button>-->
12 <button onclick="history.go(1)"> >>>>></button>
13 
14 </body>
15 </html>
js_history.html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <!--<button onclick="history.back()">back</button>-->
11 <button onclick="history.go(-1)">back</button>
12 </body>
13 </html>
js_history1.html

四、Location对象

  • Location对象包含有关当前URL的信息；
  • Location对象是Window对象的一个部分，可通过Window.location属性来访问。

Location对象方法如下：

1 location.assign(URL)
2 location.reload()
3 location.replace(newURL)
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <button onclick="f()">click</button>
 9 
10 <script>
11 //   location.assign('http://www.baidu.com')
12     function f(){
13 //        location.reload()
14        location.replace('http://www.baidu.com')
15     }
16 </script>
17 
18 </body>
19 </html>
举例
posted @ 2019-10-12 15:33  流浪代码  阅读(605)  评论(0)  编辑  收藏  举报