陈紫怡-20221111-DOM&BOM-05

一、今日学习内容：

• BOM
  
  • 基本描述
    
    • 浏览器对象模型，是一套用来管理控制浏览器的规则
      
    • DOM与BOM比较相似，都是管理抽象对象的规则
      
    • BOM主要负责页面与页面的通讯
      
    • BOM的核心对象就是window，通常BOM一般指的都是window对象
      
    • BOM是对浏览器进行管理的规则，因此没有统一的标准
      
  • BOM与DOM之间的关系
    
    • DOM通过document对象来访问，控制，修改html等文档中的内容
      
    • BOM通过window对象来访问、控制、修改浏览器中的内容
      
    • 通常可以说DOM是被包含在BOM中的，可以通过js操作来访问浏览器，通过执行浏览器对象的DOM来获取文档内容
      
  • 区别：
    
    • DOM描述了处理网页内容的方法与接口，操作页面内容
      
    • BOM描述了浏览器进行交互的方法和接口，操作页面之间
      
• 页面加载事件、窗口加载事件
  
  • 区别：
    
    • onload：dom、静态资源（CSS、图片）都加载完毕再来执行function里面的代码
      
    • DOMContentLoaded：dom节点加载完毕，不包括css、图片或者其他的静态资源
      
    • 加载速度比onload快
      
  • 调整窗口大小事件     onresize
    
    • 响应式布局----重绘
      
• 定时器
  
  • 分类
    
    • 周期定时器（周期性的）
      
      • setInterval(回调函数，执行时间)；
        
      • 执行时间单位毫秒
        
    • 延迟定时器（一次性的）
      
      • setTimeout（回调函数，延迟执行时间）；
        
      • 执行时间单位毫秒
        
    • 区别
      
      • 周期定时器一直执行下去，执行时间以毫秒为单位
        
      • 延迟定时器只执行一次，执行时间以毫秒为单位
        
    • 清除定时器
      
      • 周期定时器  clearInterval
        
      • 延迟定时器  clearTimeout
        
• JS同步和异步
  
  • 同步
    
    • 按照默认书写顺序，从上到下、从左到右依次执行，一个执行完了再来执行另一个
      
  • 异步
    
    • 异步代码一旦在程序中遇到同步代码，异步代码会让开，让同步代码先执行
      
    • 异步基本上都有回调函数
      
  • JS中三种异步的情况
    
    • 事件
      
    • 定时器
      
    • Ajax
      
• location对象
  
  • location对象提供了当前窗口中加载文档的信息，以及通常的导航功能，主要对浏览器URL地址相关数据的获取和定义
    
    • location.search----参数
      
    • location.href----完整的URL地址
      
    • location.hash----哈希
      
    • location,port----端口号
      
    • location.host----页面的域名以及端口号
      
    • location.hostname----页面的域名
      
    • location.pathname----页面中的路径/文件名
      
    • location.origin----返回URL原地址----协议、域名、端口号