JavaScript的DOM操作主要针对的是对于元素的操作，主要涉及创建、增、删、改、查、属性操作以及事件按操作。
创建元素
- document.write()
直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHtml
会将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement()
创建多个元素效率稍微低一点，但是效率更清晰
增删改查
增加元素
- appendChild() 在最后添加
- insertBefore() 在指定位置添加元素
删除元素
- node.emoveChild()
从node节点中删除一个子节点，返回删除的节点
修改元素
- 修改元素的属性： src,href,title。
- 修改普通元素内容： innerHTML,innerText。
- 修改表单元素：value,type,disabled等。
- 修改元素的样式：style，className。
查找元素
主要用于查询DOM元素
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
- querySelector()
- quertSelectorAll() 利用节点操作获取元素
- parentNode
- children
- previousElementSibling
- nextElementSibling
属性操作
主要针对自定义属性
- getAttribute() 获取属性
- setAttribute() 设置属性
- removeAttribute() 移除属性
事件操作
- element.onclick = function(){}
- element.addEventListence(type, listener[,useCapture])
type: 事件类型，字符串比如‘click’， listener:事件处理函数，事件发生时，会调用该函数 useCapture:可选参数，布尔值，默认为false，冒泡阶段；若为true，则为捕获阶段。
- element.attachEvent() 为了兼容IE678
删除事件（解绑事件）
- btn.onclick = null; 传统方式删除事件
- btn.addEventListener(type, fn); 删除事件
- btn.attachEvent(type,fn); IE低版本
事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是是啊金对象。事件触发时机会产生事件对象，并且系统会以实参的形式传给事件处理函数。
- btn.onclick = function(e){}
阻止事件冒泡
- e.stopPropagation();
- windoe.event.cancelBubble = true
阻止默认行为
- e.preventDefault()
- return false
事件委托
- 原理： 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。
