前端面试之js基础

梦里梦外; 2021-12-22 15:30 224阅读 0赞

> ##### 一、说说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也有

解析：其中的正则表达式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
    }