這篇主要是說(shuō)JS的一些api，其中包括DOM憋沿，BOM旺芽，事件，ajax辐啄，存儲(chǔ)采章，都是實(shí)際開(kāi)發(fā)會(huì)用到的，但是這些都是JS的哦壶辜，不涉及jquery悯舟，vue框架等。
一砸民、DOM操作
知識(shí)點(diǎn)
1. 事件模型
- 捕獲
- 冒泡
2. 事件流
- 捕獲用戶行為 -> 目標(biāo)階段 -> 冒泡
- 捕獲的具體流程：
window -> document -> html -> body -> 元素之間的傳遞
冒泡是從下往上
3. Event對(duì)象的常見(jiàn)用法
- 阻止冒泡：event.stopPropagation()
- 阻止默認(rèn)行為：event.preventDefault()
- 同一個(gè)元素綁定多個(gè)事件抵怎，點(diǎn)擊哪個(gè)執(zhí)行哪個(gè)：event.stopImmediatePropagation()
- 綁定當(dāng)前事件的元素：event.currentTarget（事件代理時(shí)候會(huì)用）
- 當(dāng)前被點(diǎn)擊的元素：event.target（事件代理時(shí)候會(huì)用）
4. DOM結(jié)構(gòu)操作
- 新增節(jié)點(diǎn)
var p = document.createElement('p')
p.innerHTML = 'new P';
var div1 = document.getElementById('div1');
div1.appendChild(p);
- 移動(dòng)節(jié)點(diǎn)
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
- 獲取父元素，獲取子元素
var div1 = document.getElementById('div1');
console.log(div1.parentNode);
console.log(div1.childNodes);
- 刪除節(jié)點(diǎn)
var div1 = document.getElementById('div1');
div1.removeChild(div1.childNodes[1]);
問(wèn)題
1. DOM是哪種基本的數(shù)據(jù)結(jié)構(gòu)
樹(shù)型結(jié)構(gòu)
2. DOM操作常用的api有哪些
- 獲取及修改attribute岭参、property
- 上面說(shuō)的DOM結(jié)構(gòu)操作
- 添加節(jié)點(diǎn)
- 移動(dòng)節(jié)點(diǎn)
- 刪除節(jié)點(diǎn)
- 獲取子節(jié)點(diǎn)
- 獲取父節(jié)點(diǎn)
3. DOM中attr和property有何區(qū)別
attribute是對(duì)html標(biāo)簽屬性的修改
property是對(duì)一個(gè)JS對(duì)象的屬性的修改
二反惕、BOM操作
1. 檢測(cè)瀏覽器類型
navigator.userAgent
2. url不同部分的拆解
在控制臺(tái)通過(guò)location去查看對(duì)象有哪些屬性
如下圖：
location.png
3. history
- history.back()
4. screen
- screen.width（屏幕寬度）
- screen.height（屏幕高度）
三、事件
1. 編寫(xiě)一個(gè)通用的事件監(jiān)聽(tīng)
function bindEvent(ele, type, selector, fn) {
// 沒(méi)有事件代理時(shí)演侯，將第三個(gè)參數(shù)賦值給fn
if (fn == null) {
fn = selector;
selector = null;
}
ele.addEventListener(type, function (e) {
var target = e.target;
if (selector) {
// 使用事件代理
if (target.matches(selector)) {
fn.call(target, e);
}
} else {
// 不使用事件代理
fn(e);
}
});
}
2. 事件冒泡
- DOM樹(shù)型結(jié)構(gòu)
- 事件逐層冒泡
- 阻止事件冒泡
- 因?yàn)橛惺录芭莩辛В杂惺录?/li>
3. 對(duì)于一個(gè)有無(wú)限下拉的圖片的操作，怎么給每個(gè)圖片綁定事件
- 使用事件代理
- 什么是事件代理
就是給父元素綁定事件蚌本，子元素和父元素都會(huì)有這個(gè)事件 - 使用代理的好處：
- 代碼簡(jiǎn)潔
- 減少瀏覽器內(nèi)存消耗
四、ajax及http
知識(shí)點(diǎn)
1. readyState
- 0 -（未初始化）還沒(méi)有調(diào)用send方法
- 1 -（載入）已經(jīng)調(diào)用send方法隘梨，正在發(fā)送
- 2 - （載入完成）已經(jīng)發(fā)送完成程癌，send執(zhí)行完成，已經(jīng)接受到全部相應(yīng)內(nèi)容
- 3 - （交互）正在解析響應(yīng)內(nèi)容
- 4 - （完成）解析響應(yīng)內(nèi)容完成轴猎，客戶端可以調(diào)用了
2. status
- 1xx - 請(qǐng)求已接收嵌莉，繼續(xù)處理
- 2xx - 表示處理成功，如200
- 200：客戶端請(qǐng)求成功
- 206：客戶端發(fā)送了一個(gè)帶有Range的GET請(qǐng)求頭捻脖，服務(wù)器完成了他（video锐峭，audio）
- 3xx - 需要重定向中鼠，瀏覽器直接跳轉(zhuǎn)
- 301：已經(jīng)轉(zhuǎn)移到新的url
- 302：臨時(shí)轉(zhuǎn)移到了新的url
- 304：緩存
- 4xx - 客戶端請(qǐng)求錯(cuò)誤，如404
- 400：客戶端有語(yǔ)法錯(cuò)誤
- 401：請(qǐng)求未授權(quán)（參數(shù)和方式可能錯(cuò)誤）
- 403：資源禁止被訪問(wèn)
- 404：資源不存在
- 5xx - 服務(wù)端錯(cuò)誤
- 500：服務(wù)器錯(cuò)誤
- 503：服務(wù)器宕機(jī)或者過(guò)載
3. 跨域
-
什么是跨域
瀏覽器會(huì)有同源策略沿癞，域名援雇，協(xié)議，端口只要有一個(gè)不同就是跨域- 協(xié)議：http椎扬，https
- 端口：http協(xié)議默認(rèn)是80惫搏，https默認(rèn)是443
-
可以跨域的三個(gè)標(biāo)簽
- img：（如果圖片不做防盜鏈，是可以在其他的域名下訪問(wèn)）蚕涤，可以用作打點(diǎn)統(tǒng)計(jì)筐赔，統(tǒng)計(jì)的網(wǎng)站是其他域
- link：因?yàn)椴皇芸缬蛳拗疲钥梢允褂肅DN鏈接
- script：可以使用CDN鏈接揖铜，可以使用JSONP
4. http的特點(diǎn)
- 簡(jiǎn)單快速
- 靈活
- 無(wú)連接
- 無(wú)狀態(tài)
問(wèn)題
1. 手動(dòng)編寫(xiě)一個(gè)ajax茴丰，不依賴其他庫(kù)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
alert(xhr.responseText);
}
}
}
xhr.send(null)
2. 跨域的幾種實(shí)現(xiàn)方式
- JSONP
- 服務(wù)端設(shè)置頭信息CORS
3. POST和GET的區(qū)別
- GET請(qǐng)求瀏覽器回退是無(wú)害的，但是POST會(huì)重新發(fā)送請(qǐng)求
- GET產(chǎn)生的地址會(huì)被收藏天吓，但是POST不會(huì)
- GET會(huì)被瀏覽器主動(dòng)緩存贿肩，而POST的不會(huì)，需要手動(dòng)設(shè)置
- GET請(qǐng)求只能進(jìn)行url編碼失仁，而POST支持多種編碼方式
- GET請(qǐng)求的參數(shù)會(huì)被完整保留到歷史記錄里尸曼，POST參數(shù)不會(huì)保存
- GET請(qǐng)求在url中傳送的參數(shù)有長(zhǎng)度限制，POST沒(méi)有
- 對(duì)參數(shù)的數(shù)據(jù)類型萄焦，GET只接受ASCII字符控轿，POST沒(méi)有限制
- GET參數(shù)會(huì)暴露在url中，不要放敏感信息
- GET參數(shù)通過(guò)url傳遞拂封，POST通過(guò)request body中
五茬射、存儲(chǔ)
描述一下cookie，localStorage冒签，sessionStorage的區(qū)別
- 容量：cookie是4KB在抛，storage是5M
- API不同：cookie需要自己封裝，但是storage不需要萧恕，有現(xiàn)成的api
- cookie可以用于客戶端和服務(wù)端交互
