JavaWeb-BOM分享-附带代码案例以及注解

最新推荐文章于 2024-11-12 11:19:19 发布

冷眼热眸

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量150

点赞数 4

分类专栏： JAVA语言文章标签：前端

本文链接：https://blog.csdn.net/Wang_ning__/article/details/133896241

版权

JAVA语言专栏收录该内容

36 篇文章 0 订阅

订阅专栏

概念：BOM(Browser Object Model) 是指浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

本篇文章中，因为在日常的开发中，主要用到的是Window：浏览器窗口对象、Location：地址栏对象。以下是详细介绍。

一、Window：浏览器窗口对象

获取：直接使用window，其中window.可以省略。

属性

1. history：对于history对象的引用。

2. location：对于location对象的引用。

3. navigator：对于navigator对象的引用。

方法

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

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

3. setinterval()：按照指定的周期来调用函数或计算表达式。

4. setTimeout()：按照指定的毫秒数后来调用函数或计算表达式。

以下是代码演示，并且相关代码做了详细注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-对象-BOM</title>
</head>
<body>
  <script>
    // 获取
    window.alert(" alert警告框1 ");
    alert(" alert警告框2 ");

    // 方法
    // 注意这个 confirm() 对话框是有返回值的: 点击确实返回tue，否则返回false。
    let a = window.confirm(" confirm对话框1 ");
    console.log(a)
    confirm(" confirm对话框2 ");

    // 定时器,周期性的执行函数或者运算。 参数有两个。 参数1:要执行的函数或者运算  参数2:时间周期
    var count;
    setInterval(function () {
      count++;
      console.log("周期性的执行了" + count + "次");
    }, 2000);

    // 延迟一定的时间执行函数或者运算。 参数有两个。 参数1:要执行的函数或者运算  参数2:时间周期
    setTimeout(function () {
      alert("指定时间后，执行相关代码");
    }, 3000);
  </script>
</body>
</html>

二、Location：地址栏对象

介绍：location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息

获取：直接使用window，其中window.可以省略。

属性：

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

以下是代码演示，并且相关代码做了详细注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-对象-BOM</title>
</head>
<body>
  <script>
    /**
     * 接下来介绍Location（地址栏）对象
     */
    // 获取当前地址栏中的相关信息
    alert(location.href);
    // 会自动跳转到自己可以定义的一直域名
    location.href = "自己可以定义的一直域名"
  </script>
</body>
</html>