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. selenium 之可视模式、静默模式、忽略证书不可用的设置

    1.可视模式的设置(在前台工作) from selenium import webdriver import time url = "https://y.qq.com/n/ryqq/song ...

  2. Jmeter 定时器之同步定时器(Synchronizing Timer)

    性能测试中需要模拟多用户并发测试,此时需要用到同步定时器(Synchronizing Timer).如下图,模拟用户组的数量设置20,相当于20个用户(线程)并发 名词解释: 名称:定时器名称,可根据 ...

  3. RSA_zd网校登录

    网站 aHR0cHM6Ly91c2VyLndhbmd4aWFvLmNuL2xvZ2lu 点到密码登录,会返回验证码 输入错误的账号密码点登录抓包,可以看到密码是被加密的  initator点进去  简 ...

  4. 简单易用的监控告警系统 | HertzBeat 在 Rainbond 上的使用分享

    在现有的监控告警体系中 Prometheus + AlertManger + Grafana 一直是主流,但对于中小团队或个人来说,这种体系显的较为复杂.而 HertzBeat 能让中小团队或个人很快 ...

  5. 关于jQuery的操作

    jQuery简介  简化了JS  ​ 类似于 后端 JDBC(操作数据库的基本API)   dbutils(封装JDBC)     xxx.jar 前端 JS                     ...

  6. Ventoy制作启动盘和使用VMware测试启动盘(论文版)

    - 1 Ventoy 1.1  Ventoy是什么 Ventoy是可用于制作启动U盘的开源工具,在占用少量引导分区容量后,其他空间依旧可以正常当一般的U盘读写文件.它的最大特点是只要将iso.win. ...

  7. MSIC总结取证分析——日志分析

    MSIC总结取证分析 一.日志分析: 1.常见日志分析类型: 2.常见一些考点: (1)还原特定IP攻击手段(SQL注入.暴力破解.命令执行等),或还原最初攻击时间: (2)寻找flag或者特定文件解 ...

  8. Redis缓存何以一枝独秀?(2) —— 聊聊Redis的数据过期、数据淘汰以及数据持久化的实现机制

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中呢,我们简单的介绍了下Re ...

  9. 看不懂打我系列------图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用

    @图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用 简体中文 | English 说明 本文介绍如何在CentOS Linux ...

  10. BC7-牛牛的字符矩形

    题目描述 牛牛尝试用键盘读入一个字符,然后在屏幕上显示用这个字符组成的 3*3 的矩形. 输入描述 一行读入一个 char 类型的字符. 输出描述 输出这个字符组成的 3*3 矩形. 示例 1 输入: ...