前端面试之js基础

一、说说BOM和DOM

1、BOM——浏览器对象模型
1）BOM主要用于管理窗口与窗口之间的通讯,可以对浏览器窗口进行访问和操作。用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等
2）BOM的核心是window对象。
属性 window对象有很多属性例如navigator、screen、history、location、document

• navigator:提供了与浏览器有关的信息。userAgent是最常用的属性，用来完成浏览器判断
  navigator.userAgent
• screen:主要用来获取用户的屏幕信息。它的属性例如：
  height: 获取整个屏幕的高。
  width : 获取整个屏幕的宽。
  availHeight: 整个屏幕的高减去系统部件的高（ 可用的屏幕宽度 ）
  availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度 ）
• history:包含浏览器的历史。
  back() 返回上一页。
  forward() 返回下一页。
  go(“参数”) -1表示上一页，1表示下一页
• location:用于获得当前页面的地址 (URL)。它有很多属性例如
  location.herf = ‘url地址’
  location.hostname 返回 web 主机的域名
  location.pathname 返回当前页面的路径和文件名
  location.port 返回 web 主机的端口 （80 或 443）
  location.search:设置或返回从问号 (?) 开始的 URL（查询部分）
  location.portocol 返回页面使用的web协议。 http:或https
  location.hostname:设置或返回当前 URL 的主机名
  location.hash:设置或返回从井号 (#) 开始的 URL（锚）
  location.host:设置或返回主机名和当前 URL 的端口号
  location.href:设置或返回完整的 URL
• document：用来处理页面文档

方法 window对象的一些方法：例如
1》弹框类的方法。前面省略window
alert(‘提示信息’)

confirm(“确认信息”)

prompt(“弹出输入框”)

open(“url地址”，“_black或_self”，“新窗口的大小”）

close() 关闭当前的网页
2》定时器，清除定时器。
setTimeout(函数，时间) 只执行一次

clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。

setInterval(函数，时间) 无限执行

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码

3》Cookies 用于存储 web 页面的用户信息。
　　　　JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value
3）面试题型：如何检测浏览器的类型；如何获取url的各个部分

2、DOM——文本对象模型
1、DOM是用来获取或设置文档中标签的属性，它是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分
2、相关问题：
1》DOM是哪种的基本数据结构：树
2》DOM操作常用的的API有哪些

• 获取DOM节点以及节点的attribute和property

//获取的单个元素
document.getElementById()
//获取的是集合
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelectorAll()

• 增加节点

document.createElement()//创建节点
objectName.appendChild()//添加节点

• 获取父节点和字节点

var parent = div1.parentElement

var child = div1.childNodes

• 删除节点

div1.removeChild()

3》DOM节点的Attribute和property有何区别

• property只是一个JS对象的属性的修改

var div1 = document.getElementsByClassName('divName')[0];
var s1 = div1.className;//获取样式
div1.style.width = ’2px‘;//修改样式

• Attribute是对html标签属性的修改
  用于扩充HTML标签，可以改变标签行为或提供数据，格式为name=value

div1.getAttrbute("style");
div1.setAttrbute("style","border:1px solid black")

3、BOM和DOM之间的关系

• javacsript 是通过访问 BOM 对象来访问、 控制、 修改浏览器
• BOM 的 window 包含了 document， 因此通过 window 对象的 document 属性就可以访问、检索、 修改文档内容与结构。
• document 对象又是 DOM 模型的根节点。
  因此， BOM 包含了 DOM， 浏览器提供出来给予访问的是 BOM 对象， 从 BOM 对象再访问到 DOM 对象， 从而 js 可以操作浏览器以及浏览器读取到的文档

二、 检测浏览器版本版本有哪些方式？

要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的userAgent属性来判断的。
各种浏览器的特征如下：

• IE——只有IE支持创建ActiveX控件，因此她有一个其他浏览器没有的东西，就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数，就可以明确判断出当前浏览器是IE

• Firefox——Firefox中的DOM元素都有一个getBoxObjectFor函数，用来获取该DOM元素的位置和大小

• Opera——Opera提供了专门的浏览器标志，就是window.opera属性

• Safari——Safari浏览器中有一个其他浏览器没有的openDatabase函数，可做为判断Safari的标志

• Chrome——Chrome有一个MessageEvent函数，Firefox也有

<script type="text/javascript">
        var vers = {};
        var userA = navigator.userAgent.toLowerCase();
        if (window.ActiveXObject)
            vers.ie = userA.match(/msie ([\d.]+)/)[1]
        else if (document.getBoxObjectFor)
            vers.firefox = userA.match(/firefox\/([\d.]+)/)[1]
        else if (window.MessageEvent && !document.getBoxObjectFor)
            vers.chrome = userA.match(/chrome\/([\d.]+)/)[1]
        else if (window.opera)
            vers.opera = userA.match(/opera.([\d.]+)/)[1]
        else if (window.openDatabase)
            vers.safari = userA.match(/version\/([\d.]+)/)[1];
        
        //以下进行测试
        if(vers.ie) document.write('IE: '+vers.ie);
        if(vers.firefox) document.write('Firefox: '+vers.firefox);
        if(vers.chrome) document.write('Chrome: '+vers.chrome);
        if(vers.opera) document.write('Opera: '+vers.opera);
        if(vers.safari) document.write('Safari: '+vers.safari);
    </script>

解析：其中的正则表达式userA.match(/chrome/ ([\d.]+)/)[1]表示要匹配userAgent返回的字符串中的首先是mise/(其中的\是对/进行转义)然后是数字或者是.；+表示\d即数字出现一次或多次或者.出现一次或多次

把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率

三、offsetWidth|offsetHeight,clientWidth|clientHeight与scrollWidth|scrollHeight的区别

• offsetWidth/offsetHeight返回值包含content + padding + border
  ，如果有滚动条，也不包含滚动条
• clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条1）
• scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

四、js小题型

1、例举几种强制类型转换和隐式类型转换?
1）强制类型转换：parseFloat、parseInt、Number()、Boolean()、String()
2）隐式类型转换：== ( ==两边的都会转换为数字再进行比较)、四则运算(+是只要其中有字符串结果就是字符串，即进行字符串拼接。其它运算都会转换成数字进行运算，如果不是数字就是NaN)
需要记住：undefined == null //true
undefined和null 比较返回true，二者和其他值比较返回false
2、IE和标准浏览器兼容性的一些写法
例如：

• 解决Css3中的兼容性
  Chrome(谷歌)前缀： -webkit-
  IE前缀： -ms-
  FirFox(火狐)前缀： -moz-
  poera(欧朋)前缀：-o-
• 获取浏览器可见区的高度 宽度 body
  兼容性写法：
  1）document.documentElement.clientWidth || document.body.clientWidth(高度写法相同)
  2）浏览器滚动条卷走的高度：
  document.documentElement.scrollTop || document.body.scrollTop
• Mouseevent有兼容性。标准浏览器可以直接读取，但ie不行
  解决办法：
  （获取事件）

document.onclick = function(ev) {
         var ev = ev || window.event
}

(2)获取target(事件属性可返回事件的目标节点即触发该事件的节点)

document.onclick = function(ev) {
     var target = ev.srcElement || ev.target
}