DOM总结(纯知识)
1.DOM选择器
单一获取节点
- getElementById 通过id获得元素节点
- querySelector 通过css选择器获取元素,同类元素默认取第一个
获取多个节点(后面需要加 [索引] 确定具体节点)
- getElementsByTagName 通过标签名获取
- getElementsByClassName 通过类名获取
- getElementsByName 通过Name属性获取
- querySelectorAll 通过css选择器获取全部元素
2.DOM事件
鼠标事件
-
onclick 单击
-
ondbclick 双击
-
onmousedown 鼠标按下
-
onmouseup 鼠标松开
-
onmouseenter 鼠标移入(不支持冒泡)
-
onmouseleave 鼠标移出(不支持冒泡)
-
onmouseover 鼠标移入(支持冒泡)
-
onmouseout 鼠标移出(支持冒泡)
-
onmousemove 鼠标移动(类似于上述的鼠标移入,只是移入后是不断触发的状态,可以用事件对象event.clientX/Y获取移入此刻的位置坐标)
键盘事件
- onkeyup 键盘松开
- onkeypress 键盘按下并松开
- onkeydown 键盘按下
3.document对象属性和方法
- document.activeElement 返回当前获取焦点元素
- document.addEventListener(“事件”,“函数操作”) 添加句柄
- document.createElement() 创建元素节点
- document.createTextNode() 创建文本节点(之后需要把自己appendChild()进一个元素节点)
- document.getElementByXX 获取节点
4.节点对象属性和方法
- 节点.innerHTML
- 节点.style.css样式
- 节点.nodeType 返回节点类型(元素节点= =1 文本节点= =3)
- 节点.appendChild(父节点) 将新节点插入父节点的末尾
- 节点.lastChild 返回最后一个子节点
- 节点.firstChild 返回第一个子节点
- 节点.childNodes 返回所有子节点对象