API:給程序元提供的一種工具，以便能夠更輕松的實現(xiàn)想要完成的功能

Web APIs：瀏覽器提供的一套操作瀏覽器功能和頁面元素的API（BOM和DOM）

DOM簡介：處理HTML或者XML內(nèi)容和結(jié)構(gòu)的接口

DOM樹：document，element，node

獲取元素：id,標(biāo)簽名，HTML5新增方法，特殊元素

getElementById();

getElementsByTagName()返回偽數(shù)組

element.getElementsByTagName("標(biāo)簽名")：注意（父元素必須是單個對象，獲取的時候不包括父元素自己）

document.getElementsByTagName("標(biāo)簽")獲取所有標(biāo)簽

新增獲取方法：getEelmentgsByClassName(""),querySelector(“”)返回選擇器的第一個元素對象；querySelectorAll()返回所有

獲取body元素:document.body

獲取html元素：document.documentElement

事件三要素：事件源，事件類型（onclick,onmouseover,onmouseout,onfocus,onblur,onmouseup,onmousemove,onmouseup,onmousedown），事件處理程序

獲取元素，注冊事件，處理程序

操作元素：element.innerText(從其實位置到終止位置，但它去除HTML標(biāo)簽，同時空格和換行也會去掉)，element.innnerHTML(起始到終止位置的全部內(nèi)容，包括HTML標(biāo)簽，同時保留空格和換行)

普通盒子div

操作元素:type,value,disabled,checked,selected

樣式屬性操作：element.style行內(nèi)樣式；element.className

this.style.backgroundColor = 'purple'樣式名駝峰命名法

.change{

css樣式；

}

this.className='change'

保留原來的類名：

this.className= ‘first change’

排他思想：1、所有元素全部清除樣式（干掉其他人）；2、給當(dāng)前元素設(shè)置樣式（留下我自己）；3、注意順序不能顛倒，首先干掉其他人，在設(shè)置自己

獲取自定義屬性值：element.getAttribute(“屬性”）

設(shè)置元素屬性值：element.setAttribute("屬性"，“值”）

移除：element.removeAttribute("屬性”）

H5新增：element.dataset.屬性/[‘屬性’]（如果自定義屬性里面有多個string的單詞，我們獲取的時候采取駝峰命名法）去掉data-的駝峰命名法

利用節(jié)點(diǎn)層級關(guān)系獲取元素：利用父子節(jié)點(diǎn)關(guān)系獲取元素；邏輯性強(qiáng)，但是兼容性稍差（更簡單）nodeType,nodeValue,nodeName

parentNode(得到的是最近的父級節(jié)點(diǎn))；childNodes(得到所有的子節(jié)點(diǎn)，包含元素節(jié)點(diǎn)，文本節(jié)點(diǎn)等);children(獲取所有的子元素節(jié)點(diǎn))返回偽數(shù)組

fistChild(第一個子節(jié)點(diǎn) 不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn));lastChild；firstElementChild;lastElementChild;（ie9才支持）

實際開發(fā)中：children["index"]

兄弟節(jié)點(diǎn)：nextSlibing 得到下一個兄弟節(jié)點(diǎn)，包括元素節(jié)點(diǎn)、文本節(jié)點(diǎn)；previousSibling ; nexElementSibling;previousElementSibing(獲取下一個或上一個元素節(jié)點(diǎn)，存在兼容性問題);

創(chuàng)建節(jié)點(diǎn)元素節(jié)點(diǎn)：document.createElement（'標(biāo)簽名’）

添加節(jié)點(diǎn)：node.appendChild(child)類似于css 中的after偽元素；node.insertBefore(child,指定元素）在指定元素前面添加；

刪除節(jié)點(diǎn)：removeChild（child）；阻止鏈接跳轉(zhuǎn)（href="javascript:;"）或者添加javascript:void(0)

復(fù)制節(jié)點(diǎn);node.cloneNode();注意（括號為空或里面是false 淺拷貝 只復(fù)制標(biāo)簽不賦值里面的內(nèi)容），反之，則為深拷貝

三種動態(tài)創(chuàng)建元素：document.write(),當(dāng)文檔流執(zhí)行完畢，則它會導(dǎo)致頁面全部重繪;element.innerHTML;document.createElement();innerHTML 創(chuàng)建多個元素效率更高（不要拼接字符創(chuàng)，采取數(shù)組形式拼接），結(jié)構(gòu)稍微復(fù)雜；createElement()創(chuàng)建多個元素效率稍微低一點(diǎn)點(diǎn)，但是結(jié)構(gòu)更清晰

注冊事件（綁定事件）：傳統(tǒng)注冊方式（利用on開頭的事件onclick），缺點(diǎn)，一個元素對同一個事件只能設(shè)置一個處理函數(shù)，最后注冊的處理函數(shù)將會覆蓋全面注冊的處理函數(shù)；方法監(jiān)聽注冊事件（addEventListener（）或者attachEvent（）(ie9以前獨(dú)有)）

例： btns.addEventListener('click',function(){

aler(22);

})；btns.attachEvent('click',function(){

aler(22);

})

刪除事件（解綁事件）：傳統(tǒng)注冊方式（eventTarget.onclick = null）；方法監(jiān)聽注冊（eventTarget.removeEventListener(type,listener[,urseCapture]）;eventTarget.detachEvent(eventNameWithOn,callback);

DOM 事件流：事件發(fā)生是會在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個傳播過程即DOM事件流；捕獲階段（document，HTML，body，目標(biāo)），當(dāng)前目標(biāo)階段，冒泡階段

js代碼中只能執(zhí)行捕獲或者冒泡其中一個階段

onclick 和attachEvent 只能得到冒泡階段

addEventListener(type,listener[,userCapture]) 第三個參數(shù)如果是true，表示事件捕獲階段調(diào)用事件處理程序；如果是false(默認(rèn)就是false），表示在事件冒泡階段調(diào)用事件處理程序。

事件對象：event，寫到偵聽函數(shù)的小括號里面；事件對象只有有了事件才會存在，不需要我們傳遞參數(shù)；事件對象 是 我們事件的一系列相關(guān)數(shù)據(jù)的集合；可以自己命名，比如event，evt ，e;事件對象也有兼容性問題，e= e || window.event

target 和this的區(qū)別：e.target返回觸發(fā)事件的對象；this 返回的是綁定事件的對象; 兼容性問題：vartarget =e.target || e.srcElement;跟this相似的屬性 currentTarget

阻止默認(rèn)行為：e.type返回事件類型；鏈接不跳轉(zhuǎn)或者表單不提交 e.prevnetDefault()

阻止事件冒泡：stopPropagation（）或者cancelBubble = true；

事件委托：不是每個子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器，而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上，然后利用冒泡原理影響設(shè)置每個子節(jié)點(diǎn)。

鼠標(biāo)事件：禁止選中文字selectstart，contextmenu禁用右鍵菜單;

常用的鍵盤事件：onkeyup,onkeydown,onkeypress(不能識別功能鍵)

順序:keydown ,keypress,keyup

keyCode:返回鍵的ASCII值

keyup 和 keydown 不區(qū)分字母大小寫，keypress區(qū)分字母大小寫

BOM（瀏覽器對象）：瀏覽器窗口進(jìn)行交互的對象，核心是window；全局對象，定義在全局作用域中的變量、函數(shù)都會變成window對象的屬性和方法

頁面加載事件：window.onload = function(){} 或者window.addEventListener('load',function(){});DOMContentLoaded 事件觸發(fā)時，僅當(dāng)DOM加載完成，不包括樣式表，圖片，flash等等

調(diào)整窗口大小：onresize事件，window.innerWidth;做響應(yīng)式布局

定時器：setTimeout（調(diào)用函數(shù)，延時事件毫秒），給定時器加標(biāo)識符，回調(diào)函數(shù)；setInterval（回調(diào)函數(shù)，間隔時間），調(diào)用函數(shù)三種形式（直接寫函數(shù)，寫函數(shù)名，‘函數(shù)名（）’）

停止定時器：clearTimeout(timeoutID）；clearInterval()

this 指向：一般情況下this的最終指向的是那個調(diào)用它的對象

同步和異步：單線程和多線程

執(zhí)行過程：同步任務(wù)（執(zhí)行棧），異步任務(wù)（回調(diào)函數(shù)實現(xiàn)，普通事件，資源加載，定時器，回調(diào)函數(shù)放在任務(wù)隊列）

js執(zhí)行機(jī)制：事件循環(huán)

location對象：用于獲取和設(shè)置窗體的URL，解析URL；location.href /host/port/pathname/search/hash

location常見方法：assign（）、replace（）（不能后退）、reload（）（參數(shù)為true，強(qiáng)制刷新）

navigator對象

history對象：與瀏覽器歷史記錄進(jìn)行交互；back（）、forward（）、go(參數(shù))前進(jìn)后退功能，正數(shù)前進(jìn)負(fù)數(shù)后退

offset(偏移量):獲得元素距離帶有定位父元素的位置；獲得元素自身的大小（寬度高度）；返回的數(shù)值都不帶單位；offsetParent/offsetTop/offsetLeft/offsetWidth/offsetHeight;只讀屬性

client:獲取元素可視區(qū)的相關(guān)信息；clientTOp/clientLeft/clientWidth/clientHeight

立即執(zhí)行函數(shù)：（function(){}）()或者（function（）{}（））；多個之間用分號隔開；里面所有的變量都是局部變量

scroll系列：scrollTop/scrollLeft/scrollWidth/scrollHeight

window.pageXOffset

mouseenter 事件 mouseleave 事件：沒有冒泡

mouseover 事件mouseout 事件：有冒泡

動畫：封裝函數(shù)，obj目標(biāo)對象 target目標(biāo)位置

obj.timer可以給不同的元素指定不同的定時器

緩動動畫：運(yùn)動速度變慢；公式（目標(biāo)值-現(xiàn)在的位置）/10;添加回調(diào)函數(shù)

節(jié)流閥

classList 返回元素的類名

add("類名")；remove（“類名”）；toggle('類名')切換類名

插件：fastclik、swiper、superslide、iscroll、zy.media.js

框架：bootstrap. vue/

本地存儲：sessionStorage,生命周期為關(guān)閉瀏覽器窗口；在同一個窗口下數(shù)據(jù)可以共享；以鍵值對存儲使用;localStorage,生命周期永久生效，可以多窗口共享；以鍵值對形式存儲使用

存儲數(shù)據(jù)：sessionStorage/localStorage.setItem(key,value)

獲取數(shù)據(jù)：sessionStorage/~.getItem(key)

刪除數(shù)據(jù)：sessionStroage/~.removeItem(key)

刪除所有數(shù)據(jù)：sessionStorage/~.clear()