DOM 操作
1.创建新节点
createDocumentFragment() //创建一个 DOM 片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点
2.添加、移除、替换、插入
appendChild() //把节点插入到父节点的末尾removeChild() //删除dom节点replaceChild() //替换dom节点insertBefore() //在已有的子节点前插入一个新的子节点
3.比较
isSameNode()比较两个节点是否是同一个节点
4.查找
getElementsByTagName() //通过标签名称getElementsByName() // 通过元素的 Name 属性的值(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的)getElementById() //通过元素 Id，唯一性querySelector()方法 querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹 配的元素，返回 null. 通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。而 通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
var myDiv
= document
.querySelector("#myDiv");
var selected
= document
.querySelector(".selected");
querySelectorAll()方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但 返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。(底层实现则类似于一组元素的快照,性能问题)
var ems
= document
.getElementById("myDiv").querySelectorAll("em");
var selecteds
= document
.querySelectorAll(".selected");
Selectors API Level 2 规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收 一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
querySelector和getElementBy的区别
getElementBy是document对象特有的函数，只能通过其来调用该方法。query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．在使用的时候getElement这种方法性能比较好，因为动态 NodeList 对象在浏览器中可以更快地被创建并返回,因为他们不需要预先获取所有的信息, 而静态 NodeList 从一开始就需要取得并封装所有相关数据. 因为是静态，所querySelector可以实现单击一个按钮但调用另一个按钮的点击事件。
DOM遍历
1.NodeIterator
NodeIterator 类型是两者中比较简单的一个，可以使用 document.createNodeIterator()方 法创建它的新实例。这个方法接受下列 4 个参数。
root：想要作为搜索起点的树中的节点。whatToShow：表示要访问哪些节点的数字代码。filter：是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。entityReferenceExpansion：布尔值，表示是否要扩展实体引用。这个参数在 HTML 页面 中没有用，因为其中的实体引用不能扩展。
2 TreeWalker
TreeWalker 是 NodeIterator 的一个更高级的版本,提供了下列用于在不同方向上遍历 DOM 结构的方法。
nextNode():下一个节点previousNode()：上一个节点parentNode()：遍历到当前节点的父节点；firstChild()：遍历到当前节点的第一个子节点；lastChild()：遍历到当前节点的最后一个子节点；nextSibling()：遍历到当前节点的下一个同辈节点；previousSibling()：遍历到当前节点的上一个同辈节点
创建它的新实例。这个方法接受和 NodeIterator相同的 4 个参数。
DOM相关问题
1.documen.write 和 innerHTML 的区别
document.write 只能重绘整个页面innerHTML 可以重绘页面的一部分
2.Window 对象 与 document 对象
window
Window 对象表示当前浏览器的窗口，是 JavaScript 的顶级对象。我们创建的所有对象、函数、变量都是 Window 对象的成员。Window 对象的方法和属性是在全局范围内有效的。
document
Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问Document 对象是 Window 对象的一部分，即 window.document
3.区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”
客户区坐标
鼠标指针在可视区中的水平坐标(clientX)和垂直坐标(clientY) 页面坐标
鼠标指针在页面布局中的水平坐标(pageX)和垂直坐标 屏幕坐标
设备物理屏幕的水平坐标(screenX)和垂直坐标(screenY)
4.focus/blur 与 focusin/focusout 的区别与联系
focus/blur 不冒泡，focusin/focusout 冒泡focus/blur 兼容性好，focusin/focusout 在除 FireFox 外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在 FireFox 下使用事件捕获 elem.addEventListener(‘focus’, handler, true)
5.mouseover/mouseout 与 mouseenter/mouseleave 的区别与联系
mouseover/mouseout 是标准事件，所有浏览器都支持；mouseenter/mouseleave 是 IE5.5 引入的特有事件后来被 DOM3 标准采纳，现代标准浏览器也支持mouseover/mouseout 是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐 mouseover/mouseout 托管，提高性能标准事件模型中 event.target 表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老 IE 中 event.srcElement 表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素
6.IE 的事件处理和 W3C 的事件处理有哪些区别？
绑定事件
W3C: targetEl.addEventListener(‘click’, handler, false);IE: targetEl.attachEvent(‘onclick’, handler);
删除事件
W3C: targetEl.removeEventListener(‘click’, handler, false);IE: targetEl.detachEvent(event, handler);
事件对象
W3C: var e = arguments.callee.caller.arguments[0]IE: window.event
事件目标
W3C: e.targetIE: window.event.srcElement
阻止事件默认行为
W3C: e.preventDefault()IE: window.event.returnValue = false’
阻止事件传播
W3C: e.stopPropagation()IE: window.event.cancelBubble = true
7.DOM 元素的 dom.getAttribute(propName)和 dom.propName 有什么区别和联系
dom.getAttribute()，是标准 DOM 操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性dom.propName 通常是在 HTML 文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如 a 标签生成 HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用 getAttribute 进行访问dom.getAttribute()返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）dom.propName 返回值可能是字符串、布尔值、对象、undefined 等大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property像<a href="../index.html">link</a>中 href 属性，转换成 property 的时候需要通过转换得到完整 URL一些 attribute 和 property 不是一一对应如：form 控件中<input value="hello"/>对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property
DOM样式
1.JS 获取 dom 的 CSS 样式
dom.style.name通过dom元素的style属性，只能访问到dom的行内样式 通过getComputedStyle可以获取到元素的style,但是这个属性是只读的，要修改样式还是用DOM.style.样式名
function getStyle(obj
, attr
) {
if (obj
.currentStyle
) {
return obj
.currentStyle
[attr
];
} else {
return window
.getComputedStyle(obj
, false)[attr
];
}
}
IE不支持该属性，通过currentStyle属性代替
2.link引入和@import引入css文件的区别
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；
3.css的权重
行内样式>内部样式表>外部样式表
4.样式选择器的优先级
内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器 (即* {…})
5.offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别
offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同 clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条 scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
