什么是 DOM ?
DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。
dom 结构操作怎样添加、移除、移动、复制、创建和查找节点
1、创建新节点
createDocumentFragment() //创建一个 DOM 片段
createElement() //创建一个具体的元素
createTextnode() //创建一个文本节点
2、添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //并没有 insertAfter()
3、查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)
getElementById() //通过元素 Id，唯一性
dom 事件模型
DOM 事件模型。
DOM 事件模型分为两种：事件捕获和事件冒泡。
事件捕获以点击事件为例，同类型事件会由 根—>目标的祖先素—>目标的父元素—>目标元素
事件冒泡和事件捕获截然相反。从内到外依次触发：目标元素—>目标元素的父元素—>父元素的父元素—>根
事件传播
事件捕获和事件冒泡都有事件传播阶段，传播阶段就是事件从触发开始到结束的过程。
优先级：先捕获，再冒泡。
两种传播方式的来源：W3C 推行 DOM2 级事件之前网景和 IE 在打架，网景用的事件传播方式 是捕获，IE 用的事件传播方式是冒泡
什么是事件冒泡，它是如何工作的,如何阻止事件冒泡、默认行为
1、什么是事件冒泡，他是如何工作的
在一个对象上触发某类事件（比如单击 onclick 事件），这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）
2、阻止事件冒泡的方法
- w3c 方法是：event.stopPropagation(); 事件处理过程中，阻止冒泡事件，但不会阻止默认行为（跳转至超链接
）
-
IE 则是使用 event.cancelBubble = true 阻止事件冒泡
-
return false; jq 里面事件处理过程中，阻止冒泡事件，也阻止默认行为（不跳转超链接）
封装方法：
function bubbles(e){
var ev = e || window.event; if
(ev && ev.stopPropagation) {
//非 IE 浏览器
ev.stopPropagation
(); } else
{
//IE 浏览器(IE11 以下)
ev.cancelBubble = true;
}
console.log("最底层盒子被点击了")
}
阻止默认行为：
w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;
封装：
//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
event 对象的常见应用
1、event.preventDefault(); // 阻止默认行为，阻止 a 链接默认的跳转行为
2、event.stopPropagation(); // 阻止冒泡
3、event.stopImmediatePropagation(); // 按钮绑定了 2 个响应函数，依次注册 a,b 两个事件，点击按钮，a 事件中加 event.stopImmediatePropagation()就能阻止 b 事件
4、event.currentTarget // 早期的 ie 不支持，当前绑定的事件
5、event.target
DOM 和 BOM 的区别（必会）
1、BOM
1.1) BOM 是 Browser Object Model 的缩写，即浏览器对象模型。
1.2） BOM 没有相关标准。
1.3） BOM 的最根本对象是 window
2、DOM
2.1） DOM 是 Document Object Model 的缩写，即文档对象模型。
2.2） DOM 是 W3C 的标准。
2.3） DOM 最根本对象是 document（实际上是 window.document）
事件三要素
1、事件源、就是你点的那个 div，触发的对象
2、事件类型、表示动作，比如点击、滑过等
3、事件处理函数（事件处理程序）、表示结果，比如点开关跳转到另一个页面
获取元素位置
1、通过元素的 offsetLeft 和 offsetTopdom元素的offsetLeft、offsetTop 指的是元素相对于其offseParent 指定的坐标来说的
offsetParent：是指当前元素最近的经过定位的父级元素，如果没有则一直向上直至 body。注意当前元素为 fixed 时，其 offsetParent 的值为 null
-
拓展：
offsetWidth/offsetHeight: width+padding+border
clientLeft/clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）// border 值
clientWidth/clientHeight: width+padding
scrollWidth:获取对象的滚动宽度
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
window.screen.availHeight/window.screen.availWidth: 浏览器去除上方工具栏和下放菜单栏可用宽高
window.screen.height/window.screen.width: 屏幕宽高
2、event.clientX 和 event.clientY
事件相对于浏览器窗口的水平和垂直距离
3、getBoundingClientRect
方法返回一个一个矩形对象，包含四个属性：left、top、right 和 bottom。分别表示元素各边与页面上边和左边的距离
事件委托
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委托
JavaScript 中的定时器有哪些 他们的区别及用法是什么
1、JavaScript 中的定时器有以下几种
1）setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
2）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由
setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout 也叫定时器
setInterval 也叫计时器
17、比较 attachEvent 和 addEventListener?（必会）
attachEvent 只能在 IE 浏览器给标签绑定事件, 可以多次绑定
-
语法：Element.attachEvent(Etype,EventName)
-
参数 Element:要为该元素动态添加一个事件
-
Etype:指定事件类型．比如：onclick,onkeyup,onmousemove
等
EventName:指定事件名称．也就是你写好的函数
addEventListenerW3C 标准, 除 IE 浏览器使用, 它给标签绑定事件
-
语法：Element.addEventListener(Etype,EventName,boole)
-
Etype:事件类型.比如：click,keyup,mousemove
-
注意使用 addEventListener 绑定事件时，设置参数事件类型时不必写 on．否则会出错
-
EventName:要绑定事件的名称．也就是你写好的函数
-
boole:该参数是一个布尔值：默认 false．false 代表冒泡阶段执行, true 代表捕获阶段执行
document.write 和 innerHTML 的区别
document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open,浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写
innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。
innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘,
innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分
什么是 window 对象 什么是 document 对象
1、什么是 window 对象
-
简单来说，document 是 window 的一个对象属性。
-
Window 对象表示浏览器中打开的窗口。
-
如果文档包含框架（frame 或 iframe 标签），浏 览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
-
所有的全局函数和对象都属于 Window 对象的属性和方法。 它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。
Js 拖动的原理
js 的拖拽效果主要用到以下三个事件：
mousedown 鼠标按下事件
mousemove 鼠标移动事件
mouseup 鼠标抬起事件
描述浏览器的渲染过程，DOM 树和渲染树的区别（必会）
1、浏览器的渲染过程：
解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
2、DOM 树 和 渲染树 的区别
DOM 树与 HTML 标签一一对应，每一个标签都是一个节点，节点有层级关系，每一个节点都有对应的 css 属性
如何最小化重绘(repaint)和回流(reflow)
重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。
重排（回流）:当 render 树中的一部分或者全部因为大小边距等问题发生改变而需要 DOM 树重新计算的过程
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
方法：
1、需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
2、需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
3、尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
4、避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
5、尽量使用css 属性简写，如：用 border代替 border -width , border -style , border -color
6、批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
