web总结之javaScriptDOM

JS DOM操作

DOM节点分为三大类：元素节点、属性节点、文本节点；

获取元素节点
getElementById：通过id取到唯一节点。如果ID重名，只能取到第一个。

getElementsByName()：通过name属性，获取元素集合。

getElementsByTagName()：通过标签名，获取元素集合。

getElementsByClassName()：通过class名，获取元素集合。

创建并新增节点
document.createElement("标签名") 创建节点。需要配合 setAttribute设置各种新的属性；

父节点.appendChild(新节点) 末尾追加方式插入节点;

父节点.insertBefore(新节点,目标节点) 在目标节点前插入新节点。

删除或替换节点
父节点.removeChild(被删节点): 删除父节点中的子节点；

父节点.replaceChild(新节点,旧节点): 使用新节点，替换掉旧节点；

节点.removeAttribute("属性")：删除属性。

根据层次获取节点
childNodes：获取元素的所有子节点。包括回车等文本节点。

元素.children: 获取当前元素的所有元素节点(只获取标签)。

元素.firstChild: 获取元素的第一个子节点。包括回车等文本节点。

元素.firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。

元素.lastChild: 获取元素的最后一个子节点。包括回车等文本节点。

元素.parentNode: 获取当前节点的父节点。

鼠标事件：click 鼠标单击事件

dblclick 鼠标双击事件

onmouseover 鼠标移入事件

onmouseout 鼠标移除事件

HTML事件：onload 窗体加载事件

onscroll 滚动条滑动事件

onsubmit 表单提交事件

onchange 元素改变时触发事件

onfocus 光标聚焦事件

键盘事件：

keydown：键盘按下时触发
keypress：键盘按下并松开的瞬间触发
keyup：键盘抬起时触发