JavaScript 04 BOM详解

# BOM:
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。

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

3. Window：窗口对象
   1. 创建
   2. 方法
   1. 与弹出框有关的方法：
   alert()   显示带有一段消息和一个确认按钮的警告框。
   confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
   * 如果用户点击确定按钮，则方法返回true
   * 如果用户点击取消按钮，则方法返回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口模块</title>
</head>
<body>
    <script>
        alert("welcom");
        window.alert("welcom");
        confirm("确定退出？");
    </script>
</body>
</html>

prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值

   2. 与打开关闭有关的方法：
   close()   关闭浏览器窗口。
   * 谁调用我，我关谁
   open()   打开一个新的浏览器窗口
   * 返回新的Window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打开按钮</title>
</head>
<body>
    <!--定义两个按钮-->
    <input type="button" id="openBtn" value="+">
    <input type="button" id="closeBtn" value="-">
    <script>
        var newWindow;
        var openBtn =document.getElementById("openBtn");
        var closeBtn =document.getElementById("closeBtn");
        /*点击这个按钮可以跳转到百度官网*/
        function fun1() {
            newWindow = open("https://www.baidu.com");
        }
        openBtn.onclick = fun1;
        function fun2() {
            /*谁调用我 ，我关谁--关闭百度*/
            newWindow.close();
        }
        closeBtn.onclick = fun2;
    </script>
</body>
</html>

效果：点击以下按钮即可打开一个新的窗口，然后跳转到百度页面，点击减号关闭百度

   3. 与定时器有关的方式
   setTimeout()   在指定的毫秒数后调用函数或计算表达式。
   * 参数：
   1. js代码或者方法对象
   2. 毫秒值
   * 返回值：唯一标识，用于取消定时器
   clearTimeout()   取消由 setTimeout() 方法设置的 timeout

   setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。（比如设置闹钟每天早上六点循环震动）
   clearInterval()   取消由 setInterval() 设置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
    <script>
        /*一次性定时器*/
        function fun() {
            window.alert("boom!");
        }
        // /*两秒(2000毫秒)后弹出boom*/
        // setTimeout(fun,2000);

        /*循环定时器--每隔两秒炸一次*/
        var id = setInterval(fun,2000);
        /*q取消循环定时器*/
        clearInterval(id);
    </script>
</body>
</html>

   3. 属性：
   1. 获取其他BOM对象：
   history
   location
   Navigator
   Screen:
   2. 获取DOM对象
   document
   4. 特点
   * Window对象不需要创建可以直接使用 window使用。 window.方法名();
   * window引用可以省略。方法名();

   4. Location：地址栏对象
       1. 创建(获取)：
           1. window.location
           2. location

       2. 方法：
           * reload()   重新加载当前文档。刷新
       3. 属性
           * href   设置或返回完整的 URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
</head>
<body>
    <!--定义按钮-->
    <input type="button" id="btn1" value="刷新">
    <input type="button" id="btn2" value="百度">
    <script>
        //获取btn1按钮
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function () {
            //重载页面
            location.reload();
        }
        //获取btn2按钮
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function () {
            //通过href属性访问百度官网
            location.href = "https://www.baidu.com";
        }
    </script>
</body>
</html>

5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history

2. 方法：
* back()   加载 history 列表中的前一个 URL。
* forward()   加载 history 列表中的下一个 URL。
* go(参数)   加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length   返回当前窗口历史列表中的 URL 数量。

Small rain

发布了66 篇原创文章 · 获赞 0 · 访问量 1108

私信关注

JavaScript 04 BOM详解

猜你喜欢