10_js_浏览器对象模型（BOM）

• window对象的理解
• window对象的常用属性讲解
• window对象的常用方法讲解

1. BOM对象

1.1. 什么是BOM

• BOM（Browser Object Model）即浏览器对象模型，其核心对象是 window。

  • window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档 。

    • 解释：window代表浏览器窗口，document是属于浏览器里面的内容。比如浏览器可以进行缩放，还可以进行日志输出调试，这些都不是属于document。

    • 总结：docuement是属于window的，就如网页内容是属于浏览器的。

  • window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。

    • window.document

    • window.console.log("...")

    • window.alert("...");

    • window作为全局变量在使用的时候是可以省略的。

• 课堂案例：1.window对象的理解.html

1.2 页面初始化事件

• window.load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。

• DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

• 课堂案例：2.页面初始化加载事件.html

• 
  
  
  
      
      
      
      
      
  
  
  
      
      
  
          111
      
      
          222
      
  
      按钮
  
      
  
  
  

1.3 浏览器窗口大小变化触发函数

• 文档视图调整大小时会触发 resize 事件。

• innerWidth** 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。

• innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

• 课堂案例：3.窗口大小变化会触发函数.html

2.定时触发执行函数

2.1 window.setTimeout函数讲解

• 课堂案例：4.window.setTimeout函数讲解.html

• • 全局的 setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

• 课堂案例：5.取消setTimeout定时器.html

• • 
    
    
        
        
        
        
    
    
        取消定时器
    
        
    
    

    内置的 clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器。

2.2 window.setInterval函数讲解

• 课堂案例：6.setInterval函数讲解.html

• • setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

• 课堂案例：7.页面倒计时效果.html

• 
  
  
  
      
      
      
      
      
  
  
  
      
  
          商品秒杀倒计时
          00小时
          00分钟
          00秒
  
      
  
      
  
  
  

• 课堂案例：8.取消setInterval定时器.html

• • 
    
    
    
        
        
        
        
    
    
    
        开始
        停止
    
        
    
    
    
    

    clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

2.3 发送短信倒计时效果

• 课堂案例：9.发送短信验证案例.html

• 
  
  
      
      
      
      
  
  
      手机号： 获取验证码
  
      
  
  

3. location对象

3.1 定时跳转页面案例

• Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的 Location，分别通过 Document.location和Window.location 访问。

• 课堂案例：10.定时跳转页面.html

• 
  
  
      
      
      
      
      
  
  
      
  
      跳转到百度
      
  
      
  
  

3.2 location对象的常见方法

• 课堂案例：11.location常见的方法.html

• • 
    
    
        
        
        
        
    
    
        按钮
    
        
    
    

    Location.assign() 方法会触发窗口加载并显示指定的 URL 的内容。

  • Location.replace() 方法以给定的 URL 来替换当前的资源。与 assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中，这样，用户点击回退按钮时，将不会再跳转到该页面。

• 课堂案例：12.登录参数提交解析案例.html

• 
  
  
      
      
      
      
  
  
      
      
      
  
          用户名：
  
          密码：
  
          
      
  
  

  • Location 接口的 search 属性会返回一段 USVString，其中包含一个 URL 标识中的 '?' 以及跟随其后的一串 URL 查询参数。

• 课堂案例：13.login_action.html

4. navigator对象

• 课堂案例：14.navigator对象.html

• • 主要是用来获取客户端（浏览器+操作系统等等）的信息

5 history对象

• History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

• 课堂案例：15.history对象1.html

• 
  
  
      
      
      
      
  
  
      16.history对象2.html
      跳转
  
      
  
  

• 课堂案例：16.history对象2.html

• 
  
  
      
      
      
      
  
  
      15.history对象1.html
      跳转
  
      
  
  

6 作业讲解

    
    
    
    


    请选择省份：
    
        请选择
        浙江省
        湖北省
        广东省
    

    
            请选择
            武汉市
            锦州市
            鄂州市
        

        
                请选择
                嘉兴市
                杭州市
                衢州市
            

    

• 17.课堂作业.html