慕课网前端JavaScript面试（3）

红太狼 2022-03-15 16:40 226阅读 0赞

**5.JS-Web-API**

讲解 JS 在浏览器中具体应用的面试题。包括 DOM 操作，BOM 操作，事件绑定，ajax 和 存储，这些类别的题目。

5.1从基础知识到JS-Web-API

**JS基础知识：**  
1.变量类型和计算  
2.原型和原型链  
3.闭包和作用域  
4.异步和单线程  
5.其他（如日期、Math、各种常用API）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
**JS-Web-API：**  
JS基础知识：ECMA 262标准  
JS-Web-API：W3C标准

W3C标准中关于JS的规定有：  
1.DOM操作  
2.BOM操作  
3.事件绑定  
4.ajax请求（包括http协议）  
5.存储

W3C标准没有规定任何JS基础相关的东西，不管什么变量类型、原型、作用域和异步。这些是ECMA标准管的。W3C只管定义用于浏览器中JS操作页面的API和全局变量。

JS内置的全局函数和对象有哪些？  
1.之前讲过的Object、Array、Boolean、String、Math、JSON等  
2.刚刚提到的window、document  
3.等等，很多

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
常说的JS（浏览器执行的JS）包含两部分：  
1.JS基础知识（ECMA262标准）  
2.JS-Web-API（W3C标准）

5.2DOM本质

题目：  
1.DOM是哪种基本的数据结构？  
2.DOM操作的常用API有哪些？  
3.DOM节点的attr和property有何区别？

知识点：  
DOM的本质  
DOM节点操作  
DOM结构操作

DOM的本质

DOM的本质是一种树，所以DOM是树这种数据结构。

DOM可以理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型。

5.3DOM节点操作

1.获取DOM节点  
2.prototype  
3.Attribute

1.获取DOM节点

getElementById('div1')
    getElementByClassName('.container')
    getElementByTagName('div')  //集合
    
    querySeletorAll('p')   //集合

说一下getElementByTagName和querySelector的区别：  
![在这里插入图片描述][20190304093001772.png]  
参考文章：  
[https://blog.csdn.net/tja8N2m2G46OMtF/article/details/80205248][https_blog.csdn.net_tja8N2m2G46OMtF_article_details_80205248]  
[https://blog.csdn.net/levinhax/article/details/71274456][https_blog.csdn.net_levinhax_article_details_71274456]  
[https://blog.csdn.net/erciyuan\_nuonuo/article/details/53998706][https_blog.csdn.net_erciyuan_nuonuo_article_details_53998706]

**注意：getElementByTagName、querySeletorAll和childNodes(包含空格)获取集合的区别**

<div id="div1">
      
      <p id="p1">this is p1</p>
      <p id="p2">this is p2</p>
    
    </div>  
    
    <script type="text/javascript">
    
      var div1 = document.getElementById('div1')
    
      console.log(div1.childNodes)
    
    </script>

输出结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
这种可以通过nodeType进行解决：

element nodetype 1
    text nodetype		 3

参考文章：[https://blog.csdn.net/zwkkkk1/article/details/80229923][https_blog.csdn.net_zwkkkk1_article_details_80229923]

2.property

var pList = document.querySeletorAll('p')
    var p = pList[0]
    
    console.log(p.style.width)   //获取样式
    p.style.width = '100px'   //修改样式
    console.log(p.className)   //获取class
    p.className = 'p1'   //修改class
    
    //获取nodeName和nodeType
    console.log(p.nodeName)
    console.log(p.nodeType)

3.Attribute

var pList = document.querySelectorAll('p')
    var p = pList[0]
    
    p.getAttribute('data-name')
    p.setAttribute('data-name','imooc')
    p.getAttribute('style')
    p.setAttribute('style','font-size:30px')

JS中attribute和property的区别：  
1.property是DOM中的属性，是JavaScript里的对象；  
2.attribute是HTML标签上的特性，它的值只能够是字符串；  
简单理解，Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等。  
而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

参考文章：[http://www.cnblogs.com/lmjZone/p/8760232.html][http_www.cnblogs.com_lmjZone_p_8760232.html]

5.4DOM结构操作

var p = document.createElement('p')
    p.innerHTML = '_new _p'
    
    var div1 = document.getElementById('div1')
    div1.appendChild(p)

p标签的移动（DOM结构的移动）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

JavaScript中插入HTML方法：  
1.document.write  
2.innerHTML  
3.DOM方法  
具体可以参考：[https://blog.csdn.net/u014465934/article/details/87915153][https_blog.csdn.net_u014465934_article_details_87915153]

1.DOM是哪种基本的数据结构？  
树  
2.DOM操作的常用API有哪些？  
获取DOM节点，以及节点的property和Attribute  
获取父节点，获取字节点  
新增节点，删除节点  
3.DOM节点的attr和property有何区别？  
Attribute是对HTML标签属性的修改  
property是一个JS对象的属性的修改

5.5BOM操作

BOM：Browser Object Model

题目：  
如何检测浏览器的类型  
拆解url的各部分

知识点：  
window（Window 对象表示浏览器中打开的窗口。）  
navigator（返回当前浏览器的信息）  
screen（返回有关屏幕大小宽高以及颜色深度等信息）  
location（操作刷新按钮和地址栏）  
history（操纵浏览器记录）

可以参考资料：[http://www.w3school.com.cn/jsref/dom\_obj\_window.asp][http_www.w3school.com.cn_jsref_dom_obj_window.asp]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

location.host 域名

如何检测浏览器的类型：

navigator.userAgent

拆解url的各部分：

location.href
    location.protocol
    location.pathname
    location.search   //search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
    location.hash   //返回一个URL的锚部分

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]

可以查看资料：[http://www.runoob.com/jsref/obj-location.html][http_www.runoob.com_jsref_obj-location.html]

**6.JS-Web-API**

6.1事件

题目：  
1.编写一个通用的事件监听函数  
2.描述事件冒泡流程  
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

知识点：  
1.通用事件绑定  
2.事件冒泡  
3.代理

通用事件绑定

1.编写一个通用事件绑定函数

var btn = document.getElementById('btn1')
    btn.addEventListener('click',function(event){
    	console.log('click')
    })
    
    function bindEvent(elem,type,fn){
    	elem.addEventListener(type,fn)
    }
    var a = document.getElementById('link1')
    bindEvent(a,'click',function(e){
    	e.preventDefault()   //阻止默认行为
    	alert('clicked')
    })

IE低版本使用attachEvent绑定事件，和W3C标准不一样。

事件冒泡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]  
stopPropagation() 方法：

不再派发事件。  
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

对于上面代码就是，冒泡到body如果不进行设置，body绑定了click事件，会触发`alert('取消')`，所以要设置stopPropatation()

DOM事件应用：代理

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]  
添加`target.nodeName === 'A'`是为了防止点击a旁边时候弹出alert框。例如下面，因为a是内联元素，所以如果不添加这一行代码，会在点击红圈圈出来地方时候，弹出body下整个innerHTML的内容。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]

完善通用绑定事件的函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 12]  
上面函数兼任不传入selector参数的情况。

关于call用法，看一个示例：

//定义一个add 方法
        function add(x, y) {
            return x + y;
        }
    
        //用call 来调用 add 方法
        function myAddCall(x, y) {
            //调用 add 方法 的 call 方法
            return add.call(this, x, y);

代理的好处：  
1.代码简洁  
2.减少浏览器内存占用

描述事件冒泡流程

DOM树形结构（因为DOM树形结构，说明事件冒泡依据）  
事件冒泡  
阻止冒泡

对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

使用代理  
知道代理的两个优点

重点总结

通用事件绑定  
事件冒泡  
代理

6.2Ajax-XMLHttpRequest

题目：  
1.手动编写一个ajax，不依赖第三方库  
2.跨域的几种实现方式（原理）

知识点：  
XMLHttpRequest  
状态码说明  
跨域

XMLHttpRequest

题目：手写编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest()
    // false是说明是异步
    xhr.open('GET','/api',false)
    xhr.onreadystatechange = function(){
    	//这里的函数异步执行，可参考之前JS基础中的异步模块
    	if(xhr.readyState == 4){
    		if(xhr.status == 200){
    			alert(xhr.responseText)
    		}
    	}
    }
    xhr.send(null)

IE兼容性问题：  
IE低版本使用ActiveXObject，和W3C标准不一样

状态码说明

0 （未初始化）还没有调用send()方法  
1 （载入）已调用send()方法，正在发送请求  
2 （载入成功）send()方法执行完成，已经接收到全部响应内容  
3 （交互）正在解析响应内容  
4 （完成）响应内容解析完成，可以在客户端调用了

6.3Ajax-跨域和问题解决

什么是跨域  
JSONP  
服务器端设置http header

跨域

浏览器有同源策略，不允许ajax访问其他域接口

可以跨域的三个标签

但是有三个标签允许跨域加载资源：  
1.img `<img src="">`  
2.link `<link href="">`  
3.script `<script src=xxx>`

三个标签的应用场景：  
1.`<img>`用于打点统计，统计网站可能是其他域  
2.`<link><script>`可以使用CDN，CDN的也是其他域  
3.`<script>`可以用于JSONP，马上讲解

跨域注意事项

1.所有的跨域请求都必须经过信息提供方允许  
2.如果未经允许即可获取，那是浏览器同源策略出现漏洞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 13]

同理，请求api.js时候不一定是得有api.js。

JSONP

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 14]

服务器端设置http header

另一个解决跨域的简洁方法，需要服务器端来做  
但是作为交互方，我们必须知道这个方法  
是将来解决跨域问题的一个趋势

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 15]

跨域的几种实现方式（原理）

JSON  
服务器端设置http header

重点总结

XMLHttpRequest  
状态码说明  
跨域

6.4存储

请描述一下cookie、sessionStorage和localStorage的区别？

容量（cookie 4KB，localStorage 2.5-10M）  
是否会携带到ajax中（cookie会携带到ajax中，sessionStorage、localStorage两个不会）  
API易用性（后者两个易用）

知识点：  
1.cookie  
2.sessionStorage和localStorage  
3.indexDB

本身用于客户端和服务器端通信  
但是它有本地存储的功能，于是就被“借用”  
使用`document.cookie=...`获取和修改即可

cookie用于存储的缺点：  
1.存储量太小，只有4KB  
2.所有http请求都带着，会影响获取资源的效率  
3.API简单，需要封装才能用`document.cookie = ...`

sessionStorage和localStorage

1HTML5专门为存储而设计，最大容量5M  
2.API简单易用

localStorage.setItem(key,value);
    localStorage.getItem(key);

3.浏览器关闭sessionStorage数据会丢失，localStorage不会，清除浏览器缓存, localStorage会被删除  
4.LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。  
5.IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。

indexDB

IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。

缓存作为一种非常常见的优化手段，不管是前端还是后端都能够经常用到,  
后端的缓存方案, 就是redis、memcached这类的  
前端的话 可能更多的是http cache 缓存一些静态资源  
缓存运用的好是可以大大提升运行速度，提升用户体验的.

indexDB用来做一些数据的缓存，为什么要选用indexDB来做缓存而不是选用其他H5的存储方式呢？  
1持久化限制  
sessionStorage关闭浏览器后就会自动清除掉  
清除浏览器缓存, localStorage会被删除  
2.存储限制  
localStorage 单个domain5M 各个浏览器会有所不同

indexDB支持多种数据格式，持久化存储、支持事务、游标、索引等数据库操作,同时indexDB的存储空间大, 一般浏览器会分配50M-250M不等

现在主要做的项目是关于车辆数据及追踪的SaaS平台，对于indexDB的缓存主要可以用于一些gps数据的缓存、地理位置逆转码的缓存.

参考文章：  
[https://www.jianshu.com/p/105fcdcc3fbb][https_www.jianshu.com_p_105fcdcc3fbb]  
[http://www.ruanyifeng.com/blog/2018/07/indexeddb.html][http_www.ruanyifeng.com_blog_2018_07_indexeddb.html]  
[https://www.cnblogs.com/dolphinX/p/3415761.html][https_www.cnblogs.com_dolphinX_p_3415761.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220315/4d4e9bd1b0f146e7a484908892e4b1aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/763c8a6281d14903b4e069df0e470e00.png
[20190304093001772.png]: /images/20220315/90acff38b8c84ea4ac926db18bc478f0.png
[https_blog.csdn.net_tja8N2m2G46OMtF_article_details_80205248]: https://blog.csdn.net/tja8N2m2G46OMtF/article/details/80205248
[https_blog.csdn.net_levinhax_article_details_71274456]: https://blog.csdn.net/levinhax/article/details/71274456
[https_blog.csdn.net_erciyuan_nuonuo_article_details_53998706]: https://blog.csdn.net/erciyuan_nuonuo/article/details/53998706
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220315/62358d3cd4d34b65ade600f462d6ab60.png
[https_blog.csdn.net_zwkkkk1_article_details_80229923]: https://blog.csdn.net/zwkkkk1/article/details/80229923
[http_www.cnblogs.com_lmjZone_p_8760232.html]: http://www.cnblogs.com/lmjZone/p/8760232.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220315/4ca7d044562e4f38aa88abaf1f027953.png
[https_blog.csdn.net_u014465934_article_details_87915153]: https://blog.csdn.net/u014465934/article/details/87915153
[http_www.w3school.com.cn_jsref_dom_obj_window.asp]: http://www.w3school.com.cn/jsref/dom_obj_window.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220315/9eb279e7ed0b4e65b4ff08db3d99186a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220315/c350ea71262e4d7aa66950d20eaa2bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220315/d6416acb212841a690afcf29bb8abfea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220315/86ae5b75330d41079c5b59086dffb4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: /images/20220315/60e1dbd450474887bf3f878cc3475b0f.png
[http_www.runoob.com_jsref_obj-location.html]: http://www.runoob.com/jsref/obj-location.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: /images/20220315/52024ed674594260b4f560876c3dc7a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 10]: /images/20220315/fc488ba1db24470b860d34e779e6eba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 11]: /images/20220315/5884bd57c68a4b17a218145d70671d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 12]: /images/20220315/9709c857570f444ea2ec4cde9ee8457c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 13]: /images/20220315/7f140167d31c459d929fbda6a31dd433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 14]: /images/20220315/e51e40a5b7d24ebd9723d290fdac6535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 15]: /images/20220315/aa17edcfc852411297063952940c3b68.png
[https_www.jianshu.com_p_105fcdcc3fbb]: https://www.jianshu.com/p/105fcdcc3fbb
[http_www.ruanyifeng.com_blog_2018_07_indexeddb.html]: http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
[https_www.cnblogs.com_dolphinX_p_3415761.html]: https://www.cnblogs.com/dolphinX/p/3415761.html