1、Dom0级和Dom2级有什么区别？Dom2级的优势在哪？

• Dom0级：js跟html完全分离，便于封装
  缺点：同一个Dom对象，同时间只能绑定同一个事件，如果给这个事件绑定多个事件处理函数，只能执行最后一个事件处理函数
• Dom2级：
  1、不会跟Dom0级事件冲突，同时存在两个都会执行
  2、Dom2级可以绑定多个事件函数，不会起冲突
  +Dom2级的优势：在绑定Dom2级的事件可以随时取消，Dom0级，只能移出命名函数，不能移除匿名函数和Dom0级事件，所以在事件绑定的时候，推荐使用Dom2级命名函数的形式来绑定事件。

2、jQuery怎么绑定Dom0级和Dom2级事件？

• 1、jQuery绑定Dom0级事件

$('ele').on('click',function(){
    console.log("DOM 0级 单击事件");
}

• 2、jQuery绑定Dom2级事件

$('ele').click(function(){
    console.log("DOM 2级 单击事件 匿名函数");
})

//同样使用 jquery绑定 DOM 2级事件也有命名函数 和匿名函数
function a(){
        console.log("DOM 2级 单击事件 命名函数");
}
$('#box').click(a);

3、简述this 和 $(this)之间的区别是什么？

• 两者都指向元素本身，但this是html中的用法
• $(this)是jQuery中的方法
• 1、从功能上没有区别两个this都是指向元素本身
• 2、但是使用方法不一样只有$(this)可以使用 jquery提供的方法 原生this不写

4、简述深拷贝和浅拷贝的慨念，并用代码实现一个数组的深拷贝？

• 深拷贝：(直赋值 )在对引用数据类型进行拷贝的时候，创建了一个新的对象（开辟新的内存空间），并且复制其内的变量，则认为是深拷贝。
• 浅拷贝：(引用赋值)如果在拷贝这个对象的时候，只对基本数据类型进行了拷贝，而对引用数据类型只是做了引用的传递，而没有重新开辟一个内存空间存放这个对象，则认为是浅拷贝。

//深拷贝封装：
function copy(arr){
     var arr1 = [];
      for(var i = 0;i< arr.length;i++){
            arr1[i] = arr[i];
      }
     return arr1;
}

5、如何阻止事件冒泡和默认事件？

• 1、阻止事件冒泡

event.stopPropagation();
window.event.cancelBubble = true;

//兼容
function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE浏览器
    ev.stopPropagation();
  } else {
    //IE浏览器(IE11以下)
    ev.cancelBubble = true;
  }
  console.log("最底层盒子被点击了")
}

• 2、阻止默认事件

//阻止默认事件
event.preventDefault();  //IE下
window.event.returnValue = false; //非IE


//谷歌及IE8以上
e.preventDefault();
//IE8及以下
window.event.returnValue = false;
//无兼容问题（但不能用于节点直接onclick绑定函数）
return false;

6、请解释一下事件流、事件冒泡和事件捕获？

• 1、事件流： 当页面中一个Dom触发事件，浏览器会从window开始依次向下遍历来查找这个Dom元素
  (window => document => html => body => 祖先元素 => 父元素 => 目标元素)
• 2、事件捕获：在找的过程中，如果遇到当前元素也有相同的事件且事件没有触发，则触发这个事件，如果当前元素没有相同事件，或者事件已经被触发，则继续向下遍历，直到找到目标元素
• 3、事件冒泡：找到目标元素，触发目标元素上的事件，触发完毕后，开始按顺序一层一层的往上走直到window，在往上走的过程中，如果遇到当前元素，含有相同事件且没有被触发，则触发，如果当前元素没有相同事件获取已经被触发，则继续向上遍历，直到window结束。
• 事件捕获和事件冒泡同一个事件流只能有一个生效，一般情况下，js默认执行 事件冒泡

7、常用的事件类型

• 1. 鼠标点击事件
     click 单击事件
     dblclick 双击事件
     contextmenu 右击事件 默认事件：右击打开默认菜单栏
     mousedown 鼠标按下事件
     mouseup 鼠标释放事件
• 2. 鼠标移动事件
     mouseover 鼠标移入事件 --- 事件冒泡
     mouseout 鼠标移出事件 --- 事件冒泡
     mouseenter 鼠标移入事件 （不触发事件冒泡）
     mouseleave 鼠标移出事件 （不触发事件冒泡）
     mousemove 鼠标移动事件
     mousewheel 鼠标滚轮事件
• 3. 键盘事件
     keydown 键盘按下事件
     keyup 键盘抬起事件
• 4. 表单事件
     focus 获取焦点时触发
     blur 表单元素失去焦点时触发
     input 表单元素 输入时 触发同步 （触发一次 更新一次）
     change 当表单元素 输入时 里面数值发生改变 且失去焦点
• 5. window 事件
     scroll 滚动条事件 滚动条高度改变 触发事件
     resize 监听浏览器窗口 的大小变化
     load 加载完毕执行 只触发一次
• 6. img事件
     load 加载完毕执行 只触发一次
     error 图片加载失败执行

8、常见的Dom操作

• 1. 获取 DOM
     document.getElementById(); 根据 Id 获取节点
     document.getElementsByClassName(); 根据 class名 获取DOM节点
     document.getElementsByTagName(); 根据 标签名 获取 DOM节点
     document.querySelector(); 根据 属性选择器 获取节点
     document.querySeleteorAll();
     .nextSibling 获取下一个兄弟节点
     .nextElementSibling 获取下一个 兄弟标签节点
     .previousSibling 获取上一个兄弟节点
     .previousElementSibling 获取上一个兄弟标签节点
     .lastChild/fristChild 获取 最后一个 / 第一个 子节点
     .lastElementChild/fristElementChild 获取 最后一个 / 第一个 标签子节点
     .childNodes 获取子节点数组
     .children 获取子元素节点
     .parentNode 获取父元素整个结构
• 2. 创建 DOM 节点
     document.createElement('标签名');
     父标签.appendChild('指定节点'); 插入 DOM 节点
     父节点.replaceChild(旧节点,新节点); 用新节点替代指定的子节点
• 3. 删除 DOM 节点
     父节点.remove(子节点); 删除指定的 子节点
     节点.remove() 删除 自身节点

9、简述cookie和localStorage的区别，并写出各自的添加，获取数据的方法。

• cookie：（用服务环境打开 Live Server cookie）
  1、大小只有5kb
  2、保存到cookie中的数据只能是字符串
  3、关闭浏览器，cookie消失
• localStorage：
  1、大小为5M
  2、保存到localStorage中的数据是一个对象
  3、生命周期为不手动删除则永远存在
  4、兼容IE8以上

//设置cookie的方法
function setCookie(name, value) {
        // document.cooki
//将获取到的字符串转化为数组，以分号和空格分隔开
    cook = cook.split('; ')
    //声明一个新数组，用来保存转化好的数组
    var arr = [];
    for(var i = 0 ; i < arr..length; i++){
        arr[i] = cook[i].split('=');
        if(arr[i][0] == name){
            return arr[i][1];
        }
    }
}


//封装一个 设置 localStorage 的方法
function setLocal(key,value){
        localStorage[key] = JSON.stringify(value);
}

//获取
var local = localStorage.num;
local = JSON.stringify(local);
console.log(local);

10、简述location对象的组成

• localtion：
  1、host 设置或返回主机名和当前 URL 的端口号。
  2、 hostname 设置或返回当前 URL 的主机名。
  3、href 设置或返回完整的 URL。
  4、pathname 设置或返回当前 URL 的路径部分。
  5、port 设置或返回当前 URL 的端口号。
  6、 protocol 设置或返回当前 URL 的协议。
  7、search 设置或返回从问号 (?) 开始的 URL（查询部分）`)

• Location 对象方法:
  1、assign() 加载新的文档。
  2、reload() 重新加载当前文档。
  3、replace() 用新的文档替换当前文档。