DOM操作小总结

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 返回所有子节点对象