原生js面试题(一)

目录：

1. 怎样添加、移除、复制、创建、查找节点
2. 在JavaScript中什么是伪数组？如何将伪数组转化为标准数组
3. jQuery的事件委托on、live、delegate之间有什么区别
4. 描述一次完整的http请求过程(输入url敲回车发生了什么)
5. http状态码有哪些
6. 后台管理系统权限你是如何实现的？

1. 怎样添加、移除、复制、创建、查找节点

添加节点
appendChild()
移除节点
removeChild() 一个参数，这个参数是指要移走的节点，返回被移除的节点
注意：被移除的节点仍然在文档中，但是文档中没有位置
替换节点
replaceChild() 两个参数，第一个是要插入的节点 第二个是要替换的节点 返回被替换的节点
插入节点
insertBefore() 两个参数，第一个是要插入的节点，第二个是参考节点
复制节点
cloneNode() 方法，用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
比如：

 var ul = document.getElementById("box");
 var deepList = ul.cloneNode(true); //深复制
 var shallowList = ul.cloneNode(false); //浅复制

创建节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

查找节点
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

2. 在JavaScript中什么是伪数组？如何将伪数组转化为标准数组

在我之前的文章（第三题）中已经解释过
传送门-------https://www.jianshu.com/p/b40b6ab0a3f9

3. jQuery的事件委托on、live、delegate之间有什么区别

事件委托又称事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

事件委托原理：事件委托是利用事件冒泡来实现的，就是事件从最深的节点，逐层往上传播事件
例子：有一个dom树，div>ul>li>a;给a加点击事件，这个事件会一层一层往外执行，顺序a>li>ul>div，那么给div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件委托优点
1.减少内存消耗，不必为大量元素绑定事件
2.为动态添加的元素绑定事件

事件委托缺点:
1.部分事件如 focus、blur 等无冒泡机制，所以无法委托。
2.事件委托有对子元素的查找过程，委托层级过深，可能会有性能问题
3.频繁触发的事件如 mousemove、mouseout、mouseover等，不适合事件委托

delegate
语法：$(selector).delegate(childSelector,event,data,function)
概念：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
(自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。
)
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数.png

on
语法：$(selector).on(event,childSelector,data,function)
概念：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
（自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品）
提示：如需移除事件处理程序，请使用 off() 方法。
如需添加只运行一次的事件然后移除，请使用 one() 方法。

on参数.png

live
语法：$(selector).live(event,data,function)
提示：如需移除事件处理程序，请使用 die() 方法。

live参数.png

on、live、delegate之间的区别

live 把事件委托交给了document（根节点），document 向下去寻找符合条件的元素（）， 不用等待document加载结束也可以生效。
delegate可指定事件委托对象，相比于live性能更优，直接锁定指定选择器；
on事件委托对象选填，如果不填，即给对象自身注册事件，填了作用和delegate一致。

4. 描述一次完整的http请求过程(输入url敲回车发生了什么)

1.对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址
2.根据这个IP，找到对应的服务器，发起TCP的三次握手
3.建立TCP连接后发起HTTP请求
4.服务器响应HTTP请求，浏览器得到html代码
5.浏览器解析html代码，并请求html代码中的资源（如js、css图片等）（先得到html代码，才能去找这些资源）
6.浏览器对页面进行渲染呈现给用户

5. http状态码有哪些

https://www.jianshu.com/p/05ae25ea7998

6. 后台管理系统权限你是如何实现的？

1.定义静态路由表(无需权限的使用)
2.定义权限路由表(和后台返回的权限进行匹配用)
开始登录判断登录是否成功，（成功后将返回的登录token值存储到本地里，用导航守卫进行判断本地是否存在返回的这个token值）没有成功继续登录，
成功的话判断是否已经获取了用户的权限列表，没有获取重新获取权限列表，
获取到了将权限数据存储到vuex中，
（vuex中的数据是公共数据，我们在写组件时任何一个地方都可能用到这个数据，所以将这个权限数据存储到vuex中，方便使用），
然后将vuex中的权限数据和定义好的需要访问权限的路由表进行对比，
（在设置路由的组件中设置name和获取的权限列表中的路由一样），
生成当前账户对应的权限路由表，
通过addRoutes方法动态添加路由规则，
就可以生成可访问的侧边栏菜单