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