前端js面試技巧(2)——JS-WEB-API部分

上期回顧 JS基礎知識
①變量類型和計算
②原型和原型鏈
③閉包和作用域
④單線程和異步
⑤其他(如日期，Math，各種常用API)
注意：內置函數和內置對象的區別
1、內置函數：Object Array RegExp Function Error Date Number Boolean String…
2、內置對象：Math JSON…

本期主要內容
1、Dom操作
2、Bom操作
3、事件綁定
4、Ajax請求(包括http協議)
5、存儲

注：
JS基礎知識：ECMA 262標準
JS-WEB-API：W3C標準，它參與規定任何JS基礎相關的東西，不管什麼變量類型、原型、作用域和異步，只管定義用於瀏覽器JS操作頁面的API和全局變量

①頁面彈框是window.alert(123)，瀏覽器需要做：
定義一個window全局變量，對象類型
給它定義一個alert屬性，屬性值是一個函數

②獲取元素document.getElementById(id),瀏覽器需要：
定義一個document全局變量，對象類型；
給它定義一個getElementById的屬性，屬性值是一個函數

Dom操作

• Dom本質

  html是xml的一種特殊結構
  Dom可以理解爲：
  瀏覽器把拿到的html代碼，結構化一個瀏覽器能識別並且js可操作性的一個模型而已

• Dom節點操作

①獲取DOM節點
var div1=document.getElementById(‘div1’)；//元素
var divList=document.getElementsByTagName(‘div’); //集合
console.log(divList.length)
console.log(divList[0])

var containerList=document.getElementsByClassName(“.contaner”)//集合
var pList=document.querySelectorAll(‘p’)//集合
②property
var pList=document.querySelectorAll(‘all’);
var p=pList[0];
console.log(p.style.width)
p.style.width=’100px’
console.log(p.className)
p.className=’p1’

//獲取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

③Attribute

• Dom結構操作

①新建節點
②查詢子節點
③查詢父節點
④刪除節點

• 解答

問題1、dom是哪種基本的數據結構？
樹
問題2、Dom操作的常用API有哪些？
①獲取DOM節點，以及節點的property和Attribute
②獲取父節點，獲取子節點
③新增節點，刪除節點
問題3、Dom節點的Attribute和Property有和區別？
①property只是一個JS對象的屬性的修改
②Attribute是對html標籤屬性的修改

BOM操作

• navigator

var ua=navigator.userAgent
var isChrome=ua.indexOf(‘Chrome’)
console.log(isChrome)

• screen

console.log(screen.width)
console.log(scr)

• location

console.log(location.href)
console.log(location.protocal)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)

• history

history.back()
histort.forward()

• 解答

題目1、如何檢測瀏覽器的類型
var ua=navigator.userAgent
var isChrome=ua.indexOf(‘Chrome’)
console.log(isChrome)
題目2、拆解url的各部分
參考location

事件

• 通用事件綁定

var btn=document.getElementById(‘btn1’);
btn.addEventListener(‘click’,function(event){
console.log(‘clicked’)
})

function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}

var a=document.getElementById(‘link1’)
bindEvent(a,’click’,function(e){
e.preventDefault() //阻止默認行爲
alert(‘clicked’)
})

注：關於IE低版本的兼容性
①IE低版本使用attachEvent綁定事件，和W3C標準不一樣
②IE低版本使用量以非常少，很多網站都早已不支持
建議對IE低版本的兼容性：瞭解即可，無需深究
如果遇到對IE低版本要求苛刻的面試，果斷放棄

• 事件冒泡

• 代理

• 解答

問題1、編寫一個通用的事件監聽函數

問題2、描述事件冒泡流程
①DOM樹形結構
②事件冒泡
③阻止冒泡
④冒泡的應用(代理)
問題3、對於一個無線下拉加載圖片的頁面，如何給每個圖片綁定事件
①使用代理
②知道代理的兩個優點
代碼簡潔
減少瀏覽器內存佔用

Ajax

• XMLHttpRequest

var xhr=new XMLHttpRequest()
xhr.open(“GET”,’/api’,false)
xhr.onreadystatechange=function(){
//這裏的函數異步執行，可參考之前JS基礎中的異步模塊
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.reponseText)
}
}
}
xhr.send(null)

注：IE兼容性問題
①IE低版本使用ActiveXObject，和W3C標準不一樣
②IE低版本使用量非常少，很多網站都早已不支持
③建議對IE低版本的兼容性瞭解即可，無需深究
④如果遇到對IE低版本要求苛刻的面試，果斷放棄

• 狀態碼說明

0-（未初始化）還沒有調用send()方法
1-（載入）已調用send()方法，正在發送請求
2-（載入完成）send()方法執行完成，已經接收得到全部響應內容
3-(交互)正在解析響應內容
4-（完成）響應內容解析完成，可以在客戶端調用了

2xx-表示成功處理請求。如200
3xx-需要重定向，瀏覽器直接跳轉
4xx-客戶端請求錯誤，如404
5xx-服務器端錯誤，如500

• 跨域

什麼是跨域
JSONP
服務器端設置http header