DOM事件概述

DOM（文档对象模型）

1>查找 HTML 元素

找到HTML元素方法：

• 通过 id 找到 HTML 元素  document.getElementById([idName])
• 通过标签名找到 HTML 元素 document.getElementByNames([tagName])
• 通过类名找到 HTML 元素 getElementsByClassName([className])

2>改变HTML

• document.write() 可用于直接向 HTML 输出流写内容
• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
• 改变 HTML 元素的属性时使用.attribute

3>改变样式

需改变 HTML 元素的样式使用.style.property

4>对事件做出反应

HTML事件：

• 当用户点击鼠标时 onclick()
• 当网页已加载时 onload() 和 onunload()
• 当鼠标移动到元素上时onmouseover() 和 离开元素时onmouseout()
• 当按下鼠标和释放鼠标onmousedown()、onmouseup()

5>添加和删除节点

• .创建结点createElement()
• 创建结点createTextNode()
• 向元素追加结点appendChild  新创建的元素需向原有元素追加
• 删除已有元素 removeChild()  需清楚所要删除的元素以及其父元素

6>添加监听事件

• addEventListener() 用于向指定元素添加事件句柄、添加的事件句柄不会覆盖已存在的事件句柄
  element.addEventListener(event, function, useCapture);
  第一个参数是事件的类型 (如 "click" 或 "mousedown").
  第二个参数是事件触发后调用的函数。
  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

• 可以向一个元素添加多个事件，同类型的事件句柄。

• 可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

• 可以更简单的控制事件（冒泡与捕获）。

• JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

• removeEventListener() 移除事件的监听

 
 
更多
(参考)http://www.runoob.com/jsref/dom-obj-event.html

示例：

DOM（文档对象模型）基本操作



    
点击获取HTML元素
    
点击改变HTML内容
    
点击改变样式
    
点击添加节点
    
点击删除节点


 对事件做出反应
我是第一块
我是第二块