?? https://lanhai1.github.io/archives/ ?? 個(gè)人博客

一、什么是webAPI?

• web: 網(wǎng)頁(yè)
• API: 接口 一套別人封裝的屬性和方法
• webAPI: 專門(mén)操作網(wǎng)頁(yè)的方法和屬性
  萬(wàn)物皆對(duì)象叛溢，在webAPI中把網(wǎng)頁(yè)中所有元素 <element> 都當(dāng)成對(duì)象來(lái)處理

二、文檔樹(shù)

2.1 三個(gè)部分

• 文檔: document
• 元素: 網(wǎng)頁(yè)中的標(biāo)簽
• 節(jié)點(diǎn): 網(wǎng)頁(yè)中所有的內(nèi)容都叫節(jié)點(diǎn)(包括標(biāo)簽锻狗、屬性、文本、注釋)

2.2 節(jié)點(diǎn)的三個(gè)屬性

1. nodeType(節(jié)點(diǎn)類(lèi)型)
2. nodeName(節(jié)點(diǎn)名字)
3. nodeValue(節(jié)點(diǎn)值)

2.2.1 元素節(jié)點(diǎn)

元素節(jié)點(diǎn)就是標(biāo)簽節(jié)點(diǎn)

1. nodeType: 1
2. nodeName: 標(biāo)簽名(大寫(xiě))
3. nodeValue: null

2.2.2 屬性節(jié)點(diǎn)

屬性包括屬性名和屬性值

1. nodeType: 2
2. nodeName: 屬性名
3. nodeValue: 屬性值

2.2.3 文本節(jié)點(diǎn)

1. nodeType: 3
2. nodeName: #text
3. nodeValue: 文本內(nèi)容

2.2.4 注釋節(jié)點(diǎn)

1. nodeType: 8
2. nodeName: #comment
3. nodeValue: 注釋內(nèi)容

三轻纪、window對(duì)象

• window對(duì)象代表瀏覽器
• window對(duì)象是JavaScript中的頂級(jí)對(duì)象
• 任何全局變量和全局函數(shù)聲明后 在預(yù)解析的過(guò)程中都會(huì)自動(dòng)保存為window對(duì)象里面的屬性和方法
• window的兩個(gè)特殊屬性名不能再次聲明!!
  name: name屬性名不管賦值任何值都會(huì)轉(zhuǎn)換為字符串 let name = {}; -> [object Object]
top
• window的兩個(gè)方法

window.open(href); /*打開(kāi)一個(gè)網(wǎng)頁(yè)*/
window.close(); /*關(guān)閉網(wǎng)頁(yè)*/

四油额、事件

4.1 什么是事件?

在計(jì)算機(jī)中 事件代表捕捉了用戶進(jìn)行了什么操作 再給對(duì)應(yīng)的事件處理

4.2 事件三大部分

事件源 事件類(lèi)型 事件處理函數(shù)

4.2.1 事件源

用戶操作的是什么元素 事件中的this就是事件的事件源(誰(shuí)觸發(fā)這個(gè)事件那this就是誰(shuí))

4.2.2 事件類(lèi)型

用戶進(jìn)行了什么操作

4.2.2.1 on

• onmouseover 鼠標(biāo)移入
• onmouseout 鼠標(biāo)移出
• window.onload 當(dāng)頁(yè)面加載完成后執(zhí)行
  入口函數(shù) 如果想將js代碼寫(xiě)在html之前 就可以用這個(gè)事件 將js代碼寫(xiě)在事件處理函數(shù)中
• window.onunload 當(dāng)頁(yè)面退出前執(zhí)行
  可以保存用戶信息 => 用戶未保存信息直接退出網(wǎng)頁(yè)
• onfocus 獲得焦點(diǎn)
  文本框光標(biāo)閃爍
• onblur 失去焦點(diǎn)
• onkeyup 鍵盤(pán)彈起
• onkeydown 鍵盤(pán)按下
• onscroll 滾動(dòng)
  當(dāng)滾動(dòng)頁(yè)面滾動(dòng)條時(shí)觸發(fā)
• onclick 點(diǎn)擊
  onclick 和 onmousedown 區(qū)別
onclick 按下彈起才觸發(fā)
onmousedown 按下就會(huì)觸發(fā)

實(shí)現(xiàn)拖拽
要考慮元素是否有margin 移動(dòng)的x和y???減去元素原有的margin
給元素添加鼠標(biāo)按下事件
在按下事件里面給頁(yè)面添加鼠標(biāo)移動(dòng)事件
給元素注冊(cè)鼠標(biāo)彈起事件 => 清除頁(yè)面鼠標(biāo)移動(dòng)事件

• onmousedown 鼠標(biāo)按下
• onmouseup 鼠標(biāo)彈起
• onmousemove 鼠標(biāo)移動(dòng)

H5拖拽
需要為拖拽的元素添加 draggable = "true" 屬性
拖拽元素添加

• ondragstart 拖拽開(kāi)始
• ondrag 拖拽中
• ondragend 拖拽結(jié)束
  拖拽的目標(biāo)元素添加
• ondropenter 有元素拖進(jìn)來(lái)觸發(fā)
• ondropleave 有元素拖拽離開(kāi)觸發(fā)
• ondropover 主要是為了配合ondrop使用，一定要在ondropover事件里調(diào)用e.preventDefault()才能讓ondrop觸發(fā)
• ondrop 有元素拖到我范圍內(nèi)并松手才觸發(fā)

4.2.2.2 addEventListener()

三參數(shù)

/*
事件名 不加on
事件處理函數(shù)
boolean值 是否事件捕捉
*/
el.addEventListener()

ie8 不支持 addEventListener
兩參數(shù)

/*
事件名 加on
事件處理函數(shù)
*/
el.attachEvent()

4.2.2.3 on事件和addEventListener 添加事件的區(qū)別

元素.on事件 = 處理函數(shù)
(添加事件 如果是同名事件刻帚，后面的事件處理函數(shù)會(huì)覆蓋前面的)
元素.addEventListener()
(添加事件 不會(huì)覆蓋之前的同名事件)

4.2.2.4 移除事件

用什么方式添加的事件就用什么方式移除事件

• on => null

el.onclick = function(){};
// 移除
el.onclick = null;

• addEventListener => removeEventListener
  注意:如果addEventListener添加的事件的事件處理函數(shù)是匿名函數(shù)不能直接移除事件 只能移除命名事件 (ie8的 attachEvent 一樣)

el.addEventListener("click",fn1)
// 移除
el.removeEventListener("click",fn1)

• attachEvent => detachEvent

el.attachEvent("onclick",f1)
// 移除
el.detachEvent("onclick",fn1)

4.2.3 事件處理函數(shù)

用戶操作后要執(zhí)行的什么代碼

4.2.3.1 事件對(duì)象 e

• 本質(zhì)也是個(gè)對(duì)象
• 保存了事件觸發(fā)時(shí)的相關(guān)信息
• 在事件處理函數(shù)中的形參里寫(xiě)參數(shù) e
  ie有兼容問(wèn)題
  兼容代碼e = e || window.event
• 三大坐標(biāo)

screen
e.screenX 和 e.screenY
獲取的是點(diǎn)擊的位置相對(duì)于屏幕左上角的坐標(biāo)

page
e.pageX,e.pageY
獲得的是點(diǎn)擊的位置相對(duì)于頁(yè)面（文檔）左上角的坐標(biāo)
有兼容性的問(wèn)題,IE8不支持潦嘶，自己計(jì)算
pageX = e.clientX + 頁(yè)面往左滾出去的距離 (scrollLeft)
pageY = e.clientY + 頁(yè)面往上滾出去的距離 (scrollTop)

offset
e.offsetX,e.offsetY
獲得是是點(diǎn)擊的位置相當(dāng)于事件源的左上角的位置
ie屬性 有bug
offsetX = e.clientX - 盒子到可視區(qū)域的left (el.getBoundingClientRect.left)
offsetY = e.clientY - 盒子到可視區(qū)域的top (el.getBoundingClientRect.top)

4.2.3.2 this、e.target崇众、e.currentTarget區(qū)別

this 和 e.currentTarget 是一樣的
當(dāng)前調(diào)用的是誰(shuí)的事件 那么this就是誰(shuí)
e.currentTarget ie8 不支持 => 直接用this

e.target 獲取事件源(目標(biāo)階段) 正在觸發(fā)事件的那個(gè)元素
ie8不支持 => e.target
兼容代碼
var target = e.target || e.srcElement

4.3 事件的三大階段

4.3.1 如何獲取事件正在執(zhí)行的階段

在事件里可以通過(guò) e.eventPhase 來(lái)捕獲當(dāng)前是哪個(gè)階段
捕獲 => 1
目標(biāo) => 2
冒泡 => 3

4.3.2 三大階段

捕獲 目標(biāo) 冒泡

4.3.2.1 捕獲階段

一種現(xiàn)象 與冒泡階段相反 從window開(kāi)始 依次一級(jí)一級(jí)往下調(diào)用子元素的同名事件掂僵，直到找到真正觸發(fā)事件的事件源
事件捕獲默認(rèn)看不見(jiàn) 想要看到捕獲階段則需要通過(guò) addEventListener來(lái)綁定事件，并且第三個(gè)參數(shù)傳true

4.3.2.2 目標(biāo)階段

找到真正觸發(fā)事件的那個(gè)元素 -> 事件源

4.3.2.3 冒泡階段

一種現(xiàn)象 當(dāng)元素事件觸發(fā)后 會(huì)從事件源開(kāi)始依次一次一次往上調(diào)用父元素的同名事件顷歌，直到window
事件冒泡默認(rèn)存在

好處：給父元素添加事件相當(dāng)于給子元素添加了事件 -> 事件委托 -> e.target
帶來(lái)的影響(壞處)：如果子元素和父元素有同名事件 并且業(yè)務(wù)邏輯相反 則會(huì)沖突影響

4.3.3 階段順序

設(shè)置捕獲

先捕獲 從window開(kāi)始 依次一級(jí)一級(jí)調(diào)用子元素的同名事件
-> 找到目標(biāo)(真正觸發(fā)事件的元素)
-> 從目標(biāo)元素開(kāi)始 依次一級(jí)一級(jí)調(diào)用父元素的同名事件 直到window

未設(shè)置捕獲

找到目標(biāo)(真正觸發(fā)事件的元素)
-> 從目標(biāo)元素開(kāi)始 依次一級(jí)一級(jí)調(diào)用父元素的同名事件 直到window

4.3.4 阻止事件派發(fā)

阻止事件冒泡和阻止事件捕獲
e.stopPropagation()
ie8魔鬼不支持(ie8只有事件冒泡锰蓬，沒(méi)有事件捕獲) => e.cancelBubble = true

五、本地存儲(chǔ)

只能存儲(chǔ)字符串
查看本地存儲(chǔ) 瀏覽器F12->Application->Local || Session Storage->fille://

5.1 localStorage 本地存儲(chǔ)

可以把數(shù)據(jù)存儲(chǔ)到本地(瀏覽器) 只要用戶不刪除 則會(huì)一直保存 每個(gè)域名都是獨(dú)立的保存數(shù)據(jù) 不同域名不能互相訪問(wèn) 長(zhǎng)久保存數(shù)據(jù)可以存儲(chǔ)到 localStorage

• 保存數(shù)據(jù) localStorage.setItem(key,value)
• 獲取數(shù)據(jù) localStorage.getItem(key) => 如果沒(méi)有這個(gè)數(shù)據(jù) 則返回 null
• 刪除一個(gè)數(shù)據(jù) localStorage.removeItem(key)
• 清空所有數(shù)據(jù) localStorage.clear()

5.2 sessionStorage 會(huì)話存儲(chǔ)

短暫存儲(chǔ)數(shù)據(jù) 可以多頁(yè)面?zhèn)髦?相當(dāng)于localStorage會(huì)更安全 瀏覽器關(guān)閉后就不會(huì)保存了

• 保存數(shù)據(jù) sessionStorage.setItem(key,value)
• 獲取數(shù)據(jù) sessionStorage.getItem(key) => 如果沒(méi)有這個(gè)數(shù)據(jù) 則返回 null
• 刪除一個(gè)數(shù)據(jù) sessionStorage.removeItem(key)
• 清空所有數(shù)據(jù) sessionStorage.clear()

六眯漩、定時(shí)器和延時(shí)器

給元素添加動(dòng)畫(huà)定時(shí)器 可以將定時(shí)器id直接給元素 元素.timeId

6.1 定時(shí)器

每隔一段時(shí)間執(zhí)行一段代碼

/*
參數(shù)一: 要執(zhí)行的代碼 可以寫(xiě)字符串 在字符串里面寫(xiě)js代碼 或者寫(xiě)函數(shù)
參數(shù)二: 間隔事件 單位是毫秒 1000毫秒 = 1秒
*/
window.setInterval()

6.2 延時(shí)器

一段時(shí)間后執(zhí)行一段代碼

/*
參數(shù)一: 要執(zhí)行的代碼 可以寫(xiě)字符串 在字符串里面寫(xiě)js代碼 或者寫(xiě)函數(shù)
參數(shù)二: 延遲事件 單位是毫秒 1000毫秒 = 1秒
*/
window.setTimeout()

6.3 清除定時(shí)器和延時(shí)器

clearInterval(定時(shí)器id)
clearTimeout(延時(shí)器id)

七芹扭、阻止a標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)三種方式

7.1 href

將a標(biāo)簽的href的路徑改為 javascript:void(0) || javascript:void(null) || 簡(jiǎn)寫(xiě) javascript:

7.2 return

給a標(biāo)簽添加點(diǎn)擊事件 在事件處理函數(shù)的最后 return false

7.3 事件對(duì)象 e

阻止事件默認(rèn)行為 e.preventDefault()

return和事件對(duì)象e阻止跳轉(zhuǎn)的區(qū)別
return后面的代碼不執(zhí)行
e.preventDefault()不會(huì)影響后面代碼執(zhí)行

八、排他思想

先把大家恢復(fù)成默認(rèn)赦抖，再讓自己特殊 tab切換

九舱卡、offset家族

只能獲取行內(nèi)樣式

只能取值 (number) 不能賦值
offsetWidth 和 offsetHeight 獲取包括padding和border和width||height

9.1 offsetWidth

獲取盒子的最終寬度

9.2 offsetHeight

獲取盒子的最終高度

9.3 offsetTop

獲取自身上外邊框到定位父級(jí)上內(nèi)邊框的距離

9.4 offsetLeft

獲取自身左外邊框到定位父級(jí)左內(nèi)邊框的距離

十、scroll家族

scrollWidth 和 scrollHeight 獲取的包括了隱藏的部分 只能獲取(number)不能修改
scrollLeft 和 scrollTop 可以獲取也可以修改 想要滾動(dòng)條滾動(dòng)到最右變 直接賦值為 scrollWidth即可

10.1 scrollWidth

獲取盒子內(nèi)容的總寬度

10.2 scrollHeight

獲取盒子內(nèi)容的總高度

10.3 scrollTop

獲取內(nèi)容上邊滾出去的距離

10.4 scrollLeft

獲取內(nèi)容左邊滾出去的距離

scrollTop和scrollLeft有兼容問(wèn)題
兼容代碼

var scrollTop = window.pageYOffset 
|| document.documentElement.scrollTop 
|| document.body.scrollTop 
|| 0;

var scrollLeft = window.pageXOffset 
|| document.documentElement.scrollLeft 
|| document.body.scrollLeft 
|| 0;

十一队萤、client家族

如果元素有滾動(dòng)條 那么這個(gè)元素的可視寬度就是 整個(gè)盒子的寬度 - 滾動(dòng)條的寬度

11.1 clientWidth

獲取可視區(qū)域的寬

11.2 clientHeight

獲取可視區(qū)域的高

11.3 clientTop

獲取左邊框的寬度

11.4 clientLeft

獲取上邊看的寬度

十二轮锥、操作元素的方式

12.1 通過(guò)id獲取元素

如果沒(méi)有這個(gè)元素 則返回null 有則返回一個(gè)對(duì)象

獲取 id 只能通過(guò)document來(lái)獲取

document.getElementById("id")

12.2 樣式名獲取元素

如果沒(méi)有這個(gè)元素 則返回一個(gè)空集合[偽數(shù)組]
document.getElementsByClassName('class')

12.2.1 什么是偽數(shù)組?

• 有下標(biāo)索引、有元素浮禾、有長(zhǎng)度 但是沒(méi)有數(shù)組中的方法

12.3 通過(guò)標(biāo)簽名來(lái)獲取元素

ie8魔鬼有兼容問(wèn)題
document.getElementsByTagName("div")

12.4 通過(guò)name屬性來(lái)獲取元素(表單元素)

document.getElementsByName("name")

12.5 通過(guò)css選擇器來(lái)獲取元素 (h5新增)

• 獲取的是一個(gè)對(duì)象 如果匹配到多個(gè)元素則返回第一個(gè)元素
  document.querySelector(selectors)
• 獲取的是一個(gè)偽數(shù)組
  document.querySelectorAll(selectors)

12.6 獲取文檔

document

12.7 獲取html

document.documentElement

12.8 獲取head

document.head

12.9 獲取body

document.body

12.10 獲取子節(jié)點(diǎn)和子元素

• 子節(jié)點(diǎn)
  el.childNodes
• 子元素
  el.childNodes

12.11 獲取父節(jié)點(diǎn)和父元素

區(qū)別

el.parentNode可以獲取到document
el.parentElement不能獲取到document
因?yàn)閐ocument不是一個(gè)元素

• 父節(jié)點(diǎn)
  el.parentNode
• 父元素
  el.parentNode

12.12 獲取上一個(gè)兄弟節(jié)點(diǎn)和上一個(gè)兄弟元素

• 找到上一個(gè)兄弟節(jié)點(diǎn)(文本交胚、注釋份汗、標(biāo)簽)盈电，所有瀏覽器都支持
  el.previousSibling
• 找到上一個(gè)兄弟元素(只會(huì)找到元素)，IE9以下都不支持
  el.previousElementSibling

12.13 獲取下一個(gè)兄弟節(jié)點(diǎn)和下一個(gè)兄弟元素

• 找到下一個(gè)兄弟節(jié)點(diǎn)(文本杯活、注釋匆帚、標(biāo)簽)，所有瀏覽器都支持
  el.nextSibling
• 找到下一個(gè)兄弟元素(只會(huì)找到元素)旁钧，IE9以下都不支持
  el.nextElementSibling

12.14 添加子元素

父元素.appendChild("子元素")

12.15 刪除子元素

父元素.removeChild("子元素")

12.16 在某個(gè)子元素前面插入元素

父元素.insertBefore(插入的新元素,要在哪個(gè)元素前面插入)

12.17 替換子元素

父元素.replaceChild(新的元素,被替換的元素)

十三吸重、操作屬性的另二種方式

13.1 js 操作屬性

既可以操作自帶屬性，也可以操作自定義屬性

• 獲取屬性
  el.getAttribute("屬性名")
• 修改屬性
  el.setAttribute("屬性名","屬性值")
• 刪除屬性
  el.removeAttribute("屬性名")

13.2 h5 操作屬性

在自定義屬性前面加 data-
如果自定義屬性前面添加了 data-
那么這些自定義屬性都會(huì)保存到el.dataset '對(duì)象' 里面
想要取得屬性直接遍歷對(duì)象即可
取值時(shí) data-會(huì)被去掉 并且如果后面還有-
會(huì)把后面的-也去掉 并把-后面的首字母大寫(xiě)(駝峰命名法)

• 獲得屬性
  el.dataset["shengao"]
e.dataset.shengao
• 修改屬性
  el.dataset["shengao"] = "123cm"
• 刪除屬性
  delete el.dataset["shengao"]

十四歪今、創(chuàng)建元素的三種方式

• document.write()

只能在body添加元素嚎幸，并且會(huì)覆蓋之前頁(yè)面中的元素

• document.createElement()

創(chuàng)建一個(gè)標(biāo)簽存在內(nèi)存里面
再通過(guò) 父元素.appendChild(“創(chuàng)建出來(lái)的元素”) 渲染到頁(yè)面
appendChild細(xì)節(jié)
給父元素追加一個(gè)元素，添加在最后寄猩，如果此元素已經(jīng)存在嫉晶，則被移動(dòng)到最后

• el.innerHtml()

為某元素添加內(nèi)容，會(huì)覆蓋原來(lái)的內(nèi)容
+= 就只會(huì)追加不會(huì)覆蓋
每次innerHtml賦值(+=)都是重新渲染，
所以有可能會(huì)讓之前的元素丟失替废，
還會(huì)讓之前元素的事件丟失(事件委托可解決)
渲染耗性能箍铭，大量資源浪費(fèi)
先拼接字符串 再循環(huán)完了后一次性追加到頁(yè)面中

十五、修改元素的屬性

15.1 操作元素樣式中的屬性

• 獲取
  元素.style.樣式名
• 修改
  元素.style.樣式名 = 樣式值
  注意

樣式名 如果在css 有 "-" 的 應(yīng)使用 駝峰命名法
background-color => backgroundColor

15.2 操作圖片的路徑

• 獲取
  元素.scr
• 修改
  元素.scr = "路徑"

15.3 操作單標(biāo)簽按鈕的文字

• 獲取
  元素.value
• 修改
  元素.value = "值"

15.4 操作元素的類(lèi)名

15.4.1 JavaScript

• 獲取
  元素.className
• 添加
  元素.className += " class"
  注意 用+= 得加空格

15.4.2 HTML5

el.classList 返回的是一個(gè)偽數(shù)組 保存的是元素上的所有類(lèi)名

• 添加一個(gè)類(lèi)
  el.classList.add("class")
• 刪除一個(gè)類(lèi)
  el.classList.remove("class")
• 修改一個(gè)類(lèi)
  el.classList.replace("被替換的類(lèi)","要替換的新類(lèi)")
• 切換一個(gè)類(lèi)
  el.classList.toggle("class")
  沒(méi)有就添加這個(gè)類(lèi) 有就刪除這個(gè)類(lèi)
• 判斷一個(gè)類(lèi)是否存在
  el.classList.contains("class")
  存在返回true 不存在返回false

15.5 操作元素顯示or隱藏

• 顯示
  元素.style.displaye = "block"
• 隱藏
  元素.style.displaye = "none"
  如果想要通過(guò)一個(gè)按鈕切換顯示隱藏可以聲明一個(gè)flag 記錄顯示和隱藏的狀態(tài)

let flag = this.value == "隱藏" ? true : false
divBox.style.display = flag ? "none" : "block"
this.value = flag ? "顯示" : "隱藏" // 這里用來(lái)下一次
點(diǎn)擊再次toggle 所以需要與設(shè)置的flag相反設(shè)定對(duì)應(yīng)的值

15.6 表單元素的禁用和啟動(dòng)

• el.style.disabled = true

加上代表禁用 不加上代表啟動(dòng)
js里面設(shè)置它為 true 代表禁用椎镣、false 代表啟用

15.7 操作雙標(biāo)簽的文字

• 獲取
  元素.innerText
• 修改
  元素.innerText = "值"

十六诈火、innerHTML、innerText状答、textContent的區(qū)別

innerHTML沒(méi)有兼容問(wèn)題 既可以拿到文本也可以渲染標(biāo)簽

innerText和textContent都是設(shè)置標(biāo)簽里面的文本內(nèi)容
將數(shù)據(jù)當(dāng)成字符串輸出到頁(yè)面 不會(huì)渲染
innerText在老版火狐里面不支持
textContent在ie9以下都不支持

十七冷守、表單元素屬性

• value
  可以獲取大部分表單元素的內(nèi)容(option除外)
• type
  可以獲取表單元素的類(lèi)型
• disabled
  禁用屬性
• checked
  復(fù)選框選中
• selected
  下拉框選中

十八、獲取元素的最終樣式

window.getComputedStyle(element)["width"]
window.getComputedStyle(element).width

返回的string屬性值 "100px"

/*ie8魔鬼專用*/
element.currentStyle['width']

十九惊科、獲取元素到可視區(qū)域的距離

element.getBoundingClientRect()
element.getBoundingClientRect().left
element.getBoundingClientRect().top

獲取鼠標(biāo)位置相對(duì)于自身的x和y
(offsetX和offsetY有bug)
e.clientX - 盒子到可視區(qū)域的left
e.clientY - 盒子到可視區(qū)域的top

XMind思維導(dǎo)圖

webAPI.png