DOW重点核心

• 1、创建
• 2、增
• 3、删
• 4、改
• 5、查
• 6、属性操作
• 7、时间操作

• 1、document.write
• 2、innerHTML：div.innerHTML = 'xxx';
• 3、createElement()：var a document.createElement(‘标签’);

区别：

• 1、document.write是直接将内容写入页面的内容流，但是文档流执行完毕（页面显示完毕），则他会导致页面重绘（重新绘制，文档类型声明、meta等会清除，页面里面只有自己创建的内容。）
• 2、innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
• 3、innerHTML创建多个元素效率更高（指不拼接字符串的形式，而是采用数组形式拼接：利用push 将要添加的元素用数组形式加进去，再用join（‘’）把数组拼接成字符串，再改innerHTML的值），结构稍微复杂
• 4、createElement() 创建多个元素效率稍微低一点点，但是更结构清晰

总结：innerHTML的效率要比createElement()高

• 1、appendChild：node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾。
• 2、insertBefore：node.insertBefore(child,指定元素)方法将一个节点添加到父节点的指定子节点前面。

• 主要修改dom的元素属性，dom元素的内容、属性、表单的值等
  • 1、修改元素属性：src、href、title 等：直接通过xx.src xx.href xx.title等
  • 2、修改普通元素内容：innerHTML、innerText：innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。；innerHTML起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行
  • 3、修改表单元素：value、type、disabled：里面的内容通过xx.value进行修改
  • 4、修改元素样式：style、classNam

• 1、DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
• 2、H5提供的新方法：querySelector、querySelectorAll (提倡，记得带上记号 “.”或者“#”)
• 3、利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

• 1、setAttribute：设置dom的属性值
• 2、getAttribute：得到dom的属性值
• 3、removeAttribute：移除属性

• 1、onclick：鼠标点击左键触发
• 2、onmouseover：鼠标经过触发
• 3、onmouseout：鼠标离开触发
• 4、onfocus：获得鼠标焦点触发
• 5、onblur：失去鼠标焦点触发
• 6、onmousemove：鼠标移动书法
• 7、onmouseup：鼠标弹起触发
• 8、onmousedown：鼠标按下触发

• 注册事件有两种方式：传统方式和方法监听注册方式
  • 传统方式：<button onclick = "alert("hi")"></button>或btn.onclick = function() {} （无兼容性问题）
  • 方法监听注册方式：addEventListener() 是一个方法 （有兼容性问题）

addEventListener事件监听方式：如btns[1].addEventListener('click', function() { alert(22); });

该方法接收三个参数：

• type:事件类型字符串，比如click,mouseover,注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是 false。true是表示在事件捕获阶段调用事件处理程序false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序。

• 1、removeEventListener删除事件方式（是个方法，推荐）：divs[1].addEventListener('click',fn);
• 2、detachEvent删除事件方式(是个方法，兼容)
• 3、传统事件删除方式：eventTarget.onclick = null;

• 事件流描述的是从页面中接收事件的顺序
• 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
• 事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。
• 事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

加深理解：

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

小结：

• 1、JS 代码中只能执行捕获或者冒泡其中的一个阶段
• 2、onclick 和 attachEvent只能得到冒泡阶段
• 3、addEventListener(type,listener[,useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false (不写默认就是false),表示在事件冒泡阶段调用事件处理程序
• 4、实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
• 5、有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave