BOM：浏览器对象模型

最新推荐文章于 2020-07-23 16:01:53 发布

LiuszZZ

最新推荐文章于 2020-07-23 16:01:53 发布

阅读量99

点赞数

分类专栏： Java Web

原文链接：http://www.itheima.com/

版权

Java Web 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

将浏览器的各个组成部分封装成对象。

组成

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

窗口对象：`Window`

特点

Window对象不需要创建可以直接使用：window.方法名();
window引用可以省略：方法名();

属性

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

 <script>
     var h1 =  window.history;
     var h2 = history;

     alert(h1); // [object History]
     alert(h2); // [object History]
 </script>

2. 获取DOM对象：`docunemt`

<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">

    <script>
        //document.getElementById("");
       var openBtn = window.document.getElementById("openBtn");
       alert(openBtn);       
    </script>
</body>

与弹出框有关的方法

alert()：显示带有一段消息和一个确认按钮的警告框。

    <script>    
        alert("hello window");
        window.alert("hello a");
    </script>

confirm()：确认取消对话框，显示带有一段消息以及确认按钮和取消按钮的对话框。

返回值
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false

	<script>		
		//确认框
         var flag = confirm("您确定要退出吗？");

         if(flag){
             alert("再见！");
         }else{
             alert("知道你舍不得我...");
         }
    </script>

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

返回值：用户输入的值

	<script>		
		//输入框
        var result =  prompt("请输入用户名");
        alert(result);
    </script>

与打开关闭有关的方法

close()：关闭浏览器窗口，谁调用我，我关谁
open()：打开一个新的浏览器窗口，返回新的Window对象

参数：可以填入网址

代码：

  <body>
    <input id="openBtn" type="button" value="打开新窗口" />
    <input id="closeBtn" type="button" value="关闭刚当打开的窗口" />
    <script>
      //打开新窗口
      var openBtn = document.getElementById("openBtn");
      var newWindow;
      openBtn.onclick = function () {
        //打开新窗口
        newWindow = open("https://www.baidu.com");
      };

      //关闭新窗口
      var closeBtn = document.getElementById("closeBtn");
      closeBtn.onclick = function () {
        // 只能关闭最后一个打开的窗口
        // 关闭新窗口
        newWindow.close();
      };
    </script>
  </body>

与定时器有关的方式

setTimeout()：在指定的毫秒数后调用函数或计算表达式。

参数：
1. js代码或者方法对象
2. 毫秒值
  - 返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout()方法设置的timeout。

  <script>
      //一次性定时器
       setTimeout("fun();",2000);
        var id = setTimeout(fun,2000);
        clearTimeout(id);
        function fun(){
            alert('boom~~');
        }
  </script>

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval()设置的 timeout。

  <script>
      function fun(){
            alert('boom~~');
        }

        //循环定时器
        var id = setInterval(fun,2000);
        clearInterval(id);
  </script>

案例：轮播图

分析

在页面上使用img标签展示图片
定义一个方法，修改图片对象的src属性
定义一个定时器，每隔3秒调用方法一次。

代码：

<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>

        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义周期定时器
        setInterval(fun,3000);

    </script>
</body>

地址栏对象：`Location`

创建(获取)

window.location或者省略写法location

方法

reload()：重新加载当前文档。刷新

<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="goBaidu" value="去百度">

    <script>
        // 1.获取按钮
        var btn = document.getElementById("btn");
        // 2.绑定单击事件
        btn.onclick = function () {
            // 3.刷新页面
            location.reload();
        }    
    </script>
</body>

属性

href：设置或返回完整的 URL。

<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="goBaidu" value="去百度">

    <script>        
        // 案例：点击按钮访问百度
        var goBaidu = document.getElementById("goBaidu");
        // 显示当前页面网址
        var path = location.href;
        alert(path);
        // 2.绑定单击事件
        goBaidu.onclick = function () {
            // 3.刷新页面
            location.href = "https://www.baidu.com";
        }
    </script>
</body>

案例：倒计时自动跳转到首页

分析

显示页面效果<p>
倒计时读秒效果实现
定义一个方法，获取span标签，修改span标签体内容，时间
定义一个定时器，1秒执行一次该方法
在方法中判断时间如果<= 0 ，则跳转到首页

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }
    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页...
    </p>
    <script>

       // 倒计时读秒效果实现
        var second = 5;
        var time = document.getElementById("time");

        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            second -- ;
            //判断时间如果<= 0 ，则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second +"";
        }
        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);
    </script>
</body>
</html>

历史记录对象：`History`

创建(获取)

window.history或者history

方法

back()：加载history列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(参数)：加载 history列表中的某个具体页面。

参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录

代码：

<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="09_History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function(){
       //前进
       // history.forward();
        history.go(1);
    }
</script>
</body>

属性

length：返回当前窗口历史列表中的 URL 数量，即获取当前窗口历史记录个数

<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="09_History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">
<script>
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function(){
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }
</script>
</body>

LiuszZZ

关注

0
点赞
踩
0

收藏

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

将浏览器的各个组成部分封装成对象。组成Window：窗口对象Navigator：浏览器对象Screen：显示器屏幕对象History：历史记录对象Location：地址栏对象窗口对象：Window特点Window对象不需要创建可以直接使用 window.方法名();window引用可以省略。方法名();属性获取其他BOM对象：history、loc...
复制链接

扫一扫