WebApi - 簡書

WebApi

DOM樹

document
- html根元素
  - head 標簽
  - body
    - a
    - p
    - h1 ...
文檔： document 一個頁面就是一個文檔，DOM中使用document標識
元素：頁面中所有的標簽都是元素砂蔽，DOM中使用element標識
節(jié)點：網(wǎng)頁中所有的內(nèi)容倒彰，都是節(jié)點腊尚。

因為我們文檔頁面是從上往下加載，所以script寫到標簽下面（先有標簽再使用）
console.dir() 查看元素對象屬性及方法
this關(guān)鍵字的使用（當前對象的調(diào)用者）
- 全局作用域或者普通函數(shù)的this 指向全局對象window
- 方法調(diào)用中，誰調(diào)用this指向誰
- 構(gòu)造函數(shù)中 this指向構(gòu)造函數(shù)的實例
```
function fun(){
    // 執(zhí)行方法
}

var f = new fun(); // 開辟了一個新的方法空間
```

BOM 瀏覽器對象模型

DOM屬于BOM的一部分
BOM的頂級對象是window

window對象的常見事件

window.onload = function(){
    // 頁面加載完執(zhí)行的方法
}

window.addEventListener('load',function(){
    // 頁面加載完執(zhí)行
})

window.addEventListener('DOMContentLoaded',function(){
    // DOM樹加載完執(zhí)行
})

window.addEventListener('resize',function(){
    // 頁面變化時執(zhí)行
    window.innerWidth() // 屏幕寬度
})

定時器

// 1.setTimeOut 延時調(diào)用企蹭，只調(diào)用一次
setTimeOut(fun,2000) = window.setTime(fun,2000)
// 1.直接調(diào)用
var f = setTimeOut(function(){},2000);
// 關(guān)閉定時器
chearTimeOut(f);


// 2.調(diào)用方法
function fun(){
    //方法調(diào)用
}
setTimeOut(fun,2000);

// 2.間隔調(diào)用 setInterval()
var f = setInterval(fun,2000); // 2000毫秒執(zhí)行一次，一直執(zhí)行
// 關(guān)閉interval
clearInterval(f)

JS執(zhí)行隊列

當主線程任務(wù)執(zhí)行完后智末，會去異步任務(wù)列表輪訓是否有任務(wù)谅摄，如果有則執(zhí)行，前提是主線程任務(wù)執(zhí)行完畢后系馆。

JS是單線程
js分為兩個線程
- 主線程同步任務(wù) 從上到下執(zhí)行
- 任務(wù)隊列異步任務(wù) （點擊事件送漠，資源加載，方法回調(diào)）
先執(zhí)行同步任務(wù)（主線程）由蘑，后執(zhí)行異步任務(wù)（任務(wù)隊列）

location對象

獲取URL對象數(shù)據(jù)闽寡，其實可以直接console.dir(location) 去查看location對象屬性

location.href 可以獲取域名地址，也可以賦值跳轉(zhuǎn)新的頁面
location.host 域名
location.port 端口號
location.path 路徑
location.search 參數(shù)
location.hash 錨點
location.assign('url') // 記錄歷史尼酿，具有后退功能
location.replace('url') // 不記錄歷史爷狈，不具有后退功能
location.reload('url') / 重新加載頁面也可以強制刷新 比較常用

**navigator對象 **

包含瀏覽器的信息，常用的是userAgent裳擎，該屬性可以返回由客戶端發(fā)送至服務(wù)端的user-agent頭部的值了解就好

history對象

與瀏覽器歷史記錄進行交互涎永，該對象包含用戶訪問過的URL

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

界面使用 用的不多

元素偏移量offset系列
元素可視區(qū)client系列
元素滾動 scroll系列

本地存儲

window.sessionStorage

容量大小 5M
生命周期為關(guān)閉瀏覽器窗口
在同一個窗口下數(shù)據(jù)可以共享

以鍵值對存儲

// 存儲數(shù)據(jù)
sessionStorage.setItem('key','value')
// 獲取數(shù)據(jù)
sessionStorage.getItem('key')
// 移除數(shù)據(jù)
sessionStorage.remove('key')
// 清除所有
sessionStorage.clear()

window.localStorage

容量大小20M
生命周期，永久生效鹿响，除非手動刪除羡微，否則一直存在
可以多個窗口共享同一瀏覽器使用

也是以鍵值對存在

// 存儲數(shù)據(jù)
localStorage.setItem('key','value')
// 獲取數(shù)據(jù)
localStorage.getItem('key')
// 移除數(shù)據(jù)
localStorage.remove('key')
// 清除所有
localStorage.clear()

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者