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