Window 对象

BOM (浏览器对象模型)

定时器-延时函数

js 执行机制

location 对象

navigator 对象

history 对象

BOM

  1. BOM (Browser Object Model) 是浏览器对象模型

  2. navigator + location+ document + history + screen --> window

  3. window 是浏览器内置的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

  4. window 对象包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM

  5. document 是实现 DOM 的基础，它其实是依附于 window 的属性

  6. 依附于 window 对象的所有属性和方法，使用时都可以省略 window

定时器 - 延时函数

  1. js 内置的一个用来让代码延迟指定的函数， setTimeout

  2. 语法：setTimeout(回调函数，等待的毫秒数)

  3. setTimeout 仅仅只执行依次，所以可以理解为就是把一段代码延迟执行，平时省略 window

  4. 清除延时函数

    • let timer = setTimeout(回调函数，等待的毫秒数)

    • clearTimeout(timer)

  5. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>解除定时器</button>
​
    <script>
        // 添加 延时函数 定时器
        let timer = setTimeout(function() {
            console.log(111);
        }, 3000)
        // 清除 延时函数 定时器
        let btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            clearTimeout(timer)
        })
    </script>
</body>
</html>

  1. 递归函数

    6.1 什么是递归函数？

    • 自己调用自己

    6.2 利用递归 与 延时函数 实现 间隔函数 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
​
    <script>
        // 利用递归函数 实现 间隔函数
        let div = document.querySelector('div')
        function fn() {
            div.innerHTML = new Date().toLocaleString()
            setTimeout(fn, 1000)
        }
        fn()
    </script>
</body>
</html>

js 执行机制

(js 执行机制)[js执行机制 - 简书 (jianshu.com)]

location 对象

  1. location 的数据类型是对象，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

  2. 常用的属性和方法 (Location)[Location - Web API 接口参考 | MDN (mozilla.org)]

navigator 对象

  1. navigator 的数据类型是对象，它包含有关访问者浏览器的信息

  2. 常用属性和方法 (Navigator)[Navigator - Web API 接口参考 | MDN (mozilla.org)]

  3. 警告!!! 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

    • navigator 数据可被浏览器使用者更改

    • 一些浏览器对测试站点会识别错误

    • 浏览器无法报告晚于浏览器发布的新操作系统

  4. 浏览器检测

    • 由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

      由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

      例子：if (window.opera) {...some action...}

history 对象

  1. history 的数据类型是对象，该对象与浏览器地址栏的操作对应，如前进、后退、历史记录等

  2. 常用属性和方法 (History)[History API - Web API 接口参考 | MDN (mozilla.org)]

DOM06~的更多相关文章

随机推荐

  1. 万字长文详解 YOLOv1-v5 系列模型

    一,YOLOv1 Abstract 1. Introduction 2. Unified Detectron 2.1. Network Design 2.2 Training 2.4. Inferen ...

  2. [OpenCV实战]25 使用OpenCV进行泊松克隆

    目录 1 Seamless Cloning实现 1.1 Seamless Cloning实例 1.2 正常克隆(NORMAL_CLONE)与混合克隆(MIXED_CLONE) 1.2.1 Normal ...

  3. S2-013 CVE-2013-1966

    漏洞名称 S2-013 CVE-2013-1966 远程命令执行 利用条件 Struts 2.0.0 - Struts 2.3.14.1 漏洞原理 Struts2 标签中 <s:a> 和 ...

  4. UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)

    简要题意 这道题就是要你维护一个学生成绩管理系统. 代码实现 程序设计 为了方便输出,我们定义了 println 函数: void println(string s){ cout<<s&l ...

  5. P7076 [CSP-S2020] 动物园

    题面 动物园里饲养了很多动物,饲养员小 A 会根据饲养动物的情况,按照<饲养指南>购买不同种类的饲料,并将购买清单发给采购员小 B. 具体而言,动物世界里存在 \(2^k\) 种不同的动物 ...

  6. Gvim基础操作(正则表达式)-02

    Gvim正则表达式 正则表达式在linux中使用非常广泛.主要是进行一些替换,在编写脚本的时候都会使用到.gvim.perl.sed.tcl中都会使用到. Gvim正则表达式的使用 搜索命令 /正则表 ...

  7. 基于windows系统使用GNVM进行node切换版本

    GNVM是什么? GNVM 是一个简单的 Windows 下 Node.js 多版本管理器,类似的 nvm nvmw nodist . 安装 进入官网,下载你所需要的包,直达链接 下载完成 放到我们的 ...

  8. P6327 区间加区间sin和 题解

    P6327 区间加区间sin和 题解 题目描述 给出一个长度为 \(n\) 的整数序列 \(a_1,a_2,\ldots,a_n\),进行 \(m\) 次操作,操作分为两类. 操作 \(1\):给出 ...

  9. TCP通信的概述(上)-TCP通信的概述(下)

    TCP通信的概述(上) TCP通信的概述(下)

  10. 2023牛客寒假算法基础集训营4 A-H+JLM

    比赛链接 A 题解 知识点:数学. 算一下发现 \(3\) 最好,\(2,4\) 并列, \(4\) 以后递减.于是,特判 \(3\) ,其他取最小值. (众所周知, \(e\) 进制最好qwq. 时 ...