JavaScript之BOM对象

最新推荐文章于 2024-10-18 17:51:23 发布

鬼鬼不同路

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量199

点赞数 2

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51892736/article/details/126573157

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

JavaScript之BOM对象

概述
消息框
定时器
location对象

概述

BOM：Browser Object Model 浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = “https://itheima.com”;

BOM 中包含了如下对象：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

消息框

congirm():显示带有一段信息以及确认按钮和取消按钮的对话框
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //有返回值，boolean类型
        //点击确定，返回ture
        //点击取消，返回false
        var flag=confirm("是否删除");
        alert(flag);
    </script>
</head>
<body>

</body>
</html>

效果如下：
在这里插入图片描述

定时器

定时器的设置

setInterval(调用方法，毫秒值):按照规定的周期循环（以毫秒计）来调用函数或计算表达式
示例：

 function run1(){
   alert("run1");
 }

 //希望每隔两秒执行一次run方法
setInterval("run1()",2000);

setTimeout(调用方法，毫秒值)：在一定的时间间隔后调用方法，只执行一次
示例：

 function run1(){
       alert("run1");
 }

        //希望每隔两秒执行一次run方法
 setTimeout("run1()",2000);

定时器的取消

clearInterval(定时器ID）：指定某个定时器停止
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function run1(){
            alert("run1");
        }
        //希望每隔两秒执行一次run方法
        var iid=setInterval("run1()",2000);
        clearInterval(iid);
    </script>
</head>
<body>

</body>
</html>

循环定时器的练习

执行了一次定时器，就清除定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var id;
        //希望两秒后执行一次run1方法
        function run1(){
            alert("run1");
            //执行一次run1方法，清除对应的定时器
            clearInterval(id);
        }

        id=setInterval("run1()",2000);

    </script>
</head>
<body>

</body>
</html>

location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

获取对象

使用window.location.方法()获取，window可以省略

window.location.方法();
location.方法();

location对象的属性

href:设置或返回完整的URL

 location.href="http://www.itheima.cn/";
 alert(str);

设置了href属性，浏览器就会跳转到对应的路径。

location对象的练习

设置一次性定时器，去对应的网站。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
         function run1(){
            location.href="http://www.itheima.cn/";
        }

        setTimeout("run1()",100);
    </script>
</head>
<body>
</body>
</html>

效果如下，无法访问：
在这里插入图片描述