什么是DOM 和 BOM?

DOM：
document，指文档对象模型。

BOM：
核心是window，指浏览器对象模型。
window既是操作浏览器窗口的接口，又是一个global全局对象。document也是window下的一个子对象。

三种事件模型是什么？**

事件 event 是用户操作网页时，产生的交互行为或者网页本身的一些操作。现代浏览器一般有三种事件模型。

原始事件模型（DOM0级）

事件发生后，没有传播的概念，没有事件流。监听函数只是元素的一个属性值。

两种绑定方式示例：

<!-- 1. 直接在元素的值绑定 -->
<button onclick="click()"></button>
<!-- 2. 通过js绑定 -->
<script>
  document.querySelector('button').onclick = function () {}
</script>

优点：

• 所有浏览器都兼容

缺点：

• 逻辑与显示未分离
• 相同的事件只能绑定一个，后绑定的会覆盖前绑定的
• 无法通过事件的冒泡、委托机制

  IE事件模型

  IE事件只支持冒泡，事件流有两个阶段：

1. 事件处理阶段：事件在达到目标元素时，触发监听事件
2. 事件冒泡阶段：事件从目标元素冒泡到document，并且一次检查是否有监听函数，有则执行

示例：

// 绑定事件
el.attachEvent(eventType, handler)
// 移除事件
el.detachEvent(eventType, handler)

缺点：只在IE中有效

DOM2事件模型

新增冒泡、捕获的概念，并支持一个元素节点绑定多个监听事件。

事件捕获和事件冒泡（capture、bubble）

事件流分为三个阶段：

1. 事件捕获阶段（1、2、3）：事件从document向下传播到目标元素。依次检查所有节点是否有绑定事件，如果有则执行。
2. 事件处理阶段：事件到达目标元素时，触发监听事件
3. 事件冒泡阶段（4、5、6、7）：事件从目标元素冒泡到document，并且依次检查各个节点是否绑定了事件，如果有则执行。

   addEventListener - 事件监听

   ```javascript /**
   • addEventListener有三个参数 事件名称、事件回调、捕获/冒泡
   • 设置为true，则事件在捕获阶段执行，为false则在冒泡阶段执行。 */

btn.addEventListener(‘click’, function() { console.log(‘btn’) }, true)

box.addEventListener(‘click’, function() { console.log(‘box’) }, false)

<a name="DbccZ"></a>
# 事件传播是什么？
**事件** 发生在DOM元素上时，该事件并不完全发生在那个元素上。
事件传播有三个阶段：
1. **捕获**阶段 - 事件从 `window `开始，**向下**到每个元素，直到到达目标元素事件或 `event.target`
1. **目标**阶段 - 事件到达目标元素
1. **冒泡**阶段 - 事件从目标元素冒泡，然后**上升**到每个元素，直到到达 `window`
<a name="BvG99"></a>
# 事件委托（代理）是什么？
**事件委托** 本质上是利用了事件冒泡的机制。<br />事件在冒泡的过程中，会上升到父元素。且父元素可以通过事件对象 `event.target` 获取到目标节点。
因此可以将监听事件绑定在父元素上，通过事件对象获取到子元素。
优点：
- 不必为每个子元素都绑定事件，减少内存消耗
- 事件动态绑定，子元素可以随意动态增减不需要单独再绑定，事件绑定在父元素上
<a name="OefqT"></a>
# DOM增删改查？
1. 创建新节点
```javascript
createDocumentFragment() // 创建一个DOM片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点

1. 添加、移除、替换、插入

   appendChild(node)
   removeChild(node)
   replaceChild(new,old)
   insertBefore(new,old)

2. 查找

   getElementById();
   getElementsByName();
   getElementsByTagName();
   getElementsByClassName();
   querySelector();
   querySelectorAll();

3. 属性操作

   getAttribute(key);
   setAttribute(key, value);
   hasAttribute(key);
   removeAttribute(key);