前端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