Javascript的BOM常用功能

最新推荐文章于 2023-04-15 12:40:40 发布

csdn_wuhg

最新推荐文章于 2023-04-15 12:40:40 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript BOM

本文链接：https://blog.youkuaiyun.com/qq_44127968/article/details/96005431

Javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了浏览器对象模型(BOM)的基本概念及常用功能，详细解释了Window、History和Location对象的作用与使用方法，包括定时器、历史记录操作及URL管理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Javascript的BOM常用功能

一、BOM的简单介绍

BOM（Browser Object Model）浏览器对象模型。主要是拿来操作浏览器对象的，主要有五个对象。一般Navigator和Screen对象很少使用到，这里就不做叙述了。

对象名	描述
Window	JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator	包含客户端浏览器的信息。
Screen	包含客户端显示屏的信息。
History	包含了浏览器窗口访问过的 URL。
Location	包含了当前 URL 的信息。

二、window对象

1.window对象的在使用时，可以省略window.属性名。（这里前五个是获取对象的）

功能	描述
document	对 Document 对象的只读引用
location	用于窗口或框架的 Location 对象。
Navigator	对 Navigator 对象的只读引用。
Screen	对 Screen 对象的只读引用。
history	对 History 对象的只读引用。
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()	显示可提示用户输入的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

2.setInterval()，一个可以循环的定时器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
    <script>
        /*
           setInterval(参1，参2),一个带有循环的定时器，参1代表需要执行的函数，参2是一个循环的一个毫秒值
           
           setInterval会返回一个数字，可以使用clearInterval(返回的数字)来将定时器关闭
         */
        //定义一个全局变量
        var index = 1;
        function test() {
            //alert弹窗
            alert("我执行了" + (index++) + "了");
        }

        //每三秒运行一次test()函数
        setInterval("test()", 3000);

    </script>
</head>
<body>

</body>
</html>

3.setTimeout()，只执行一次的定时器，用法于setInterval()一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
    <script>
        /*
           setTimeout(参1，参2),只执行一次的定时器，参1代表需要执行的函数，参2是一个循环的一个毫秒值

           setTimeout会返回一个数字，可以使用clearTimeout(返回的数字)来将定时器关闭,但几乎很少使用
         */
        //定义一个全局变量
        var index = 1;
        function test() {
            //alert弹窗
            alert("我执行了" + (index++) + "了");
        }

        //只执行一次test()函数
        setTimeout("test()", 3000);

    </script>
</head>
<body>

</body>
</html>

三、History对象

1.历史记录对象，此当前窗口的跳转记录。

功能	描述
length	返回浏览器历史列表中的 URL 数量。
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

2.go()，跳转到历史记录中的某一个具体页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
</head>
<body>

<!--go()，跳转到历史记录中的某一个具体页面。
因为历史记录必须要有跳转过才能看出效果 ，这里只是一个跳转的页面-->
<a href="1.html">跳转到1.html的超链接</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
           通过获取这个按钮，然后点击触发跳转的功能
            go(参数)：参数为整数，－1代表上一条，－2等于上上条历史记录，1代表下一跳记录
            所以可以直接代替掉back()和forward()两个方法的
        */
        window.onload = function () {

            document.getElementById("btn").onclick = function () {
                //获取对象，并调用go（）方法
                history.go(-1);
            }
        }

    </script>
</head>
<body>
    <!--这里定义一个按钮-->
    <input type="button" id="btn" value="返回上一条历史记录">
</body>
</html>

四、Location对象

1.Location对象是地址栏对象，即URL

功能	描述
reload()	重新加载当前文档。（相当于刷新）
href	地址栏对象的URL

2.href不仅可以赋值跳转至页面，还可以获取一个返回当前地址栏的URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>

</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="go" value="百度">
<script>
    /*
        reload():
            重新刷新
        href:
            地址属性
     */

    var btn = document.getElementById("btn");
    btn.onclick = function (){
        location.reload();
    }

    var href = location.href;
    alert(href);

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