WebApi

DOM树

• document

  • html根元素
    • head 标签
    • body
      • a
      • p
      • h1 ...

• 文档： document 一个页面就是一个文档，DOM中使用document标识

• 元素：页面中所有的标签都是元素，DOM中使用element标识

• 节点：网页中所有的内容，都是节点。

• 因为我们文档页面是从上往下加载，所以script写到标签下面（先有标签再使用）

• console.dir() 查看元素对象属性及方法

• this关键字的使用（当前对象的调用者）

  • 全局作用域或者普通函数的this 指向全局对象window

  • 方法调用中，谁调用this指向谁

  • 构造函数中 this指向构造函数的实例

    function fun(){
        // 执行方法
    }
    
    var f = new fun(); // 开辟了一个新的方法空间
    

BOM 浏览器对象模型

• DOM属于BOM的一部分

• BOM的顶级对象是window

window对象的常见事件

window.onload = function(){
    // 页面加载完执行的方法
}

window.addEventListener('load',function(){
    // 页面加载完执行
})

window.addEventListener('DOMContentLoaded',function(){
    // DOM树加载完执行
})

window.addEventListener('resize',function(){
    // 页面变化时执行
    window.innerWidth() // 屏幕宽度
})

定时器

// 1.setTimeOut 延时调用，只调用一次
setTimeOut(fun,2000) = window.setTime(fun,2000)
// 1.直接调用
var f = setTimeOut(function(){},2000);
// 关闭定时器
chearTimeOut(f);


// 2.调用方法
function fun(){
    //方法调用
}
setTimeOut(fun,2000);

// 2.间隔调用 setInterval()
var f = setInterval(fun,2000); // 2000毫秒执行一次，一直执行
// 关闭interval
clearInterval(f)

JS执行队列

当主线程任务执行完后，会去异步任务列表轮训是否有任务，如果有则执行，前提是主线程任务执行完毕后。

• JS是单线程
• js分为两个线程
  • 主线程 同步任务 从上到下执行
  • 任务队列 异步任务 （点击事件，资源加载，方法回调）
• 先执行同步任务（主线程），后执行异步任务（任务队列）

location对象

获取URL对象数据，其实可以直接console.dir(location) 去查看location对象属性

• location.href 可以获取域名地址，也可以赋值 跳转新的页面

• location.host 域名

• location.port 端口号

• location.path 路径

• location.search 参数

• location.hash 锚点

• location.assign('url') // 记录历史，具有后退功能

• location.replace('url') // 不记录历史，不具有后退功能

• location.reload('url') / 重新加载页面 也可以强制刷新 比较常用

**navigator对象 **

• 包含浏览器的信息，常用的是userAgent，该属性可以返回由客户端发送至服务端的user-agent头部的值 了解就好

history对象

与浏览器历史记录进行交互，该对象包含用户访问过的URL

• back 后退功能
• forward 前进功能
• go 前进后退功能 go(1)前进一步 go(-1)后退一步

界面使用 用的不多

• 元素偏移量offset系列
• 元素可视区client系列
• 元素滚动 scroll系列

本地存储

• window.sessionStorage

  • 容量大小 5M

  • 生命周期 为关闭浏览器窗口

  • 在同一个窗口下数据可以共享

  • 以键值对存储

    // 存储数据
    sessionStorage.setItem('key','value')
    // 获取数据
    sessionStorage.getItem('key')
    // 移除数据
    sessionStorage.remove('key')
    // 清除所有
    sessionStorage.clear()
    

• window.localStorage

  • 容量大小20M

  • 生命周期，永久生效，除非手动删除，否则一直存在

  • 可以多个窗口共享 同一浏览器使用

  • 也是以键值对存在

    // 存储数据
    localStorage.setItem('key','value')
    // 获取数据
    localStorage.getItem('key')
    // 移除数据
    localStorage.remove('key')
    // 清除所有
    localStorage.clear()