节点操作

　　三种动态创建元素的区别

　　　　1、document.write()：它是直接将内容写入页面的内容流，但是当文档流执行完毕，则它会导致页面全部重绘(将页面内容重置)。

　　　　2、element.innerHTML = ""：它是将内容写入某个 DOM 节点，不会导致页面全部重绘

　　　　3、document.createElement()：

　　　　inderHTML 创建多个元素更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。

　　　　createElement() 创建多个元素效率要低一点点，但是结构更清晰。

DOM 重点核心

　　主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作等。

　　　　创建：

　　　　　　1、document.write

　　　　　　2、innerHTML

　　　　　　3、createElement

　　　　增：

　　　　　　1、appendChild

　　　　　　2、insertBefore

　　　　删：

　　　　　　1、removeChild

　　　　改：

　　　　　　1、修改元素属性：src、href、title 等。

　　　　　　2、修改普通元素内容：innerHTML、innerText 等。

　　　　　　3、修改表单元素：value、type、disabled 等。

　　　　　　4、修改元素样式：style、className。

　　　　查：

　　　　　　1、DOM 提供 API 方法：getElementById、getElementsByTagName 古老用法不太推荐。

　　　　　　2、H5 提供的新方法：querySelector、querySelectorAll 提倡。

　　　　　　3、利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

　　　　属性：

　　　　　　1、setAttribute：设置 dom 的属性值。

　　　　　　2、getAttribute：获取 dom 的属性值。

　　　　　　3、removeAttribute：移出属性。

　　　　事件操作：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

事件高级

　　注册事件

　　　　　　给元素添加事件，称为注册事件或者绑定事件。

　　　　　　注册事件有两种方式：传统方式和方法监听注册方式。

　　　　　　传统方式：利用 on 开头的事件，比如 onclick； btn.onclick = function(  ) {  }。特点是注册事件的唯一性，也就是同一个元素同一个事件只能设置一个处理函数，后注册的处理函数会覆盖前面注册的处理函数。

　　　　　　方法监听注册：addEventListener() 它是一个方法。特点是同一个元素同一个事件可以注册多个处理函数，函数会按照注册顺序依次执行。

　　　　　　　　参数：eventTarget.addEventListener(type, listener, useCapture)

　　　　　　　　　　1、type：事件类型字符串，比如 click、mouseover，这里不需要带 on。

　　　　　　　　　　2、listener：事件处理函数，事件发生时会调用该监听函数。

　　　　　　　　　　3、useCapture：可选参数，是一个布尔值，默认是 false。

标签：触发,鼠标,元素,js,事件,注册,处理函数,第十天
来源： https://www.cnblogs.com/0529qhy/p/16126244.html