30.4 JavaScript BOM浏览器对象模型

最新推荐文章于 2023-07-13 00:29:50 发布

birdlun

最新推荐文章于 2023-07-13 00:29:50 发布

阅读量270

点赞数

分类专栏： 02 javaee

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/109387099

版权

02 javaee 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

1 BOM浏览器对象模型

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

组成：

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

1.1 Window窗口对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
Window对象不需要创建可以直接使用 window使用。如： window.方法名(); * window引用可以省略

Window窗口对象常用属性与方法：

属性：	window.history 简写history location window.location Navigator Screen document：获取DOM对象
方法：	1. 与弹出框有关的方法： window引用可以省略 alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。（如果用户点击确定按钮，则方法返回true，击取消按钮，则方法返回false） prompt() 显示可提示用户输入的对话框。返回值：获取用户输入的值
	2. 与打开关闭有关的方法： close() 关闭浏览器窗口。 * 谁调用我，我关谁 open() 打开一个新的浏览器窗口 * 返回新的Window对象
	3. 与定时器有关的方法 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 * 参数：. js代码或者方法对象 2. 毫秒值 * 返回值：唯一标识，用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。

<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">
<script>
    //1 Window窗口对象：与弹出有关的方法
    window.alert("hellow");//显示带有一段消息和一个确认按钮的警告框
    alert("hellow");//简写

    var flag=confirm("你确定要退出游戏吗？");//显示带有一段消息以及确认按钮和取消按钮的对话框。
    if(flag){
      document.write("我准备退出游戏");
      //。。。退出操作
    }else {
      //提示操作。。
        document.write("开始游戏");
    }

    var result=prompt("请输入用户名");//显示可提示用户输入的对话框。
    document.write(result);

    // 2 Window窗口对象： 与打开关闭有关的方法
    var openBtn=document.getElementById("openBtn");//获取按钮元素对象
    var closeBtn=document.getElementById("closeBtn");
    var newWindow;
    openBtn.onclick=function (){
        newWindow=open("https:\\www.baidu.com");// open()	打开一个新的浏览器窗口
    }
    closeBtn.onclick=function () {
        newWindow.close();//close()	关闭浏览器窗口。
    }

    //3 Window窗口对象：与定时器有关的方法
//一次性定时器
    function fun(){
        document.write("闹钟1响了~~~~");
    }
    setTimeout("fun()",2000);//在指定的毫秒数后调用函数或计算表达式。

    function fun1(){
        document.write("闹钟2响了~~~~");
    }
     var time=setTimeout(fun1,2000);//在指定的毫秒数后调用函数或计算表达式。
    //clearTimeout(time);//取消由 setTimeout() 方法设置的 timeout。

//循环定时器
    fun3(){
    document.write("闹钟3响了@@@")
    }
    var id=setInterval(fun3,2000);//按照指定的周期（以毫秒计）来调用函数或计算表达式。
    clearInterval(id);//取消由 setInterval() 设置的 timeout

    //4 Window窗口对象：获取history
    var his=window.history;
    var his2=history;
    document.write(his);
</script>

列：实现轮播图

<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
<script>
    /* 分析：1.在页面上使用img标签展示图片 2.定义一个方法，修改图片对象的src属性 3.定义一个定时器，每隔3秒调用方法一次。
 */
    var number=1;
    function fun(){
        number++;
        if(number>3){
            number=1;
        }
        var img=document.getElementById("img");
        img.src="./img/banner_"+number+".jpg";
    }
    setInterval(fun,3000);//循环定时器
</script>

1.2 Location：地址栏对象

创建(获取)	window.location 2. location
属性	href 设置或返回完整的 URL
方法	reload() 重新加载当前文档。刷新

<body>
    <input id="btn" type="button" value="刷新">
    <input id="goBaidu" type="button" value="去百度">
<script>
    var btn =document.getElementById("btn");
    btn.onclick=function (){
        window.location.reload();//重新加载当前文档。刷新
    };

    var goBaidu=document.getElementById("goBaidu");
    goBaidu.onclick=function () {
        location.href="https://www.baidu.com";
    }
</script>

列：实现倒计时跳转页面

    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p><span id="time">5</span>秒钟后自动跳转。。。</p>
<script>
    /*分析：1.显示页面效果  <p>
           2.倒计时读秒效果实现
               2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               2.2 定义一个定时器，1秒执行一次该方法
           3.在方法中判断时间如果<= 0 ，则跳转到首页     */
    var second=5;
    var time=document.getElementById("time");
    function showNew() {
        second--;
        if(second<=0){
            location.href="https://www.baidu.com";
        }
        time.innerText=second;
    }
    setInterval(showNew,1000);

</script>

1.3 History：历史记录对象

创建(获取)

window.history 2. history

属性

length 返回当前窗口历史列表中的 URL 数量。

方法

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go(参数) 加载 history 列表中的某个具体页面。 * 参数：正数：前进几个历史记录负数：后退几个历史记录

<body>
    <input id="btn" type="button" value="获取历史记录数">
    <a href="./07%20案例%20自动跳转.html"></a>
    <input id="button" type="button" value="前进">
    <input id="button1" type="button" value="后退">

<script>
    var btn=document.getElementById("btn");//获取按钮元素对象
    btn.onclick=function (){
        document.write(window.history.length);//获取历史记录数的条数
    }

    var button=document.getElementById("button");
    button.onclick=function (){
        history.go(1);
    }

    var button=document.getElementById("button");
    button.onclick=function (){
        history.back();
    }
</script>