什么是DOM？
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。
DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。
①.文档节点：在树的顶端是文档节点，它呈现整个页面。
②.元素节点：需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。
③.属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。
④.文本节点：当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。
常见的DOM节点主要有三种
①.元素节点：如<html>，<a>，<body>等都是元素节点，即标签
②.文本节点：向用户展示的内容，如<title>...</title>中的“文档标题”，<p>hello world</p> 中的内容
③.属性节点：元素的属性，如<a>中的href属性 通过document.getElementById 和 document.body 获取的元素就是获取元素的节点。
DOM树中的节点均可通过javascript进行访问，所有html节点均可被修改或删除，也可以创建新节点
常用的DOM操作方法
document.title // 设置页面title
document.getElementById(id) // 根据id获取元素
document.getElementsByTagName(name) // 根据tag获取元素
document.createElement(name) // 创建元素
parentNode.appendChild(node) // 向子节点列表末尾添加一个节点
parentNode.insertBefore() // 把要插入的节点放到某个特定的位置
parentNode.removeChild() // 移除节点
parentNode.cloneNode() // 对节点进行复制，接受一个布尔值参数，true为深拷贝，false为浅拷贝
element.innerHTML // 设置/获取元素内容
element.styles // 设置/获取元素样式
element.setAttribute() // 设置元素属性值
element.getAttribute() // 获取元素属性值
element.addEventListener() // 添加事件绑定
DOM事件流
事件流所描述的就是从页面中接受事件的顺序
DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
①捕获阶段：一开始从文档的根节点流向目标对象；（从上往下）
②目标阶段：然后在目标对向上被触发；
③冒泡阶段：之后再回溯到文档的根节点。（从下往上）
①事件捕获：当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p
②事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document 。
DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发 dom 事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
不同的浏览器对此有着不同的实现，IE10 及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
面试题
-
DOM 是什么？
-
事件级别
-
自定义事件
-
手写EventEmitter(发布订阅模式--简单版)
-
什么是事件传播?
-
什么是事件冒泡？
-
什么是事件捕获？
-
event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？
-
如何知道是否在元素中使用了event.preventDefault()方法？
-
编写一个通用的事件监听函数
-
描述事件冒泡流程
-
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
-
三种事件模型是什么？
-
事件委托/事件代理是什么？ 有什么优点？
-
DOM 操作——怎样添加、移除、移动、复制、创建和查找节点？
-
添加删除了DOM节点会发生什么？(回流)
参考：
看完这几道 JavaScript 面试题，让你与考官对答如流（上）
