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()