理解js的DOM操作

浏览数：27 / 时间：2015年06月09日

1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
document.documentElement    返回文档的根节点<html>
document.body    <body>
document.activeElement 返回当前文档中被击活的标签节点(ie)
event.fromElement       返回鼠标移出的源节点(ie)
event.toElement    返回鼠标移入的源节点(ie)
event.srcElement    返回激活事件的源节点(ie)
event.target       返回激活事件的源节点(firefox)
当前对象为node
返回父节点：node.parentNode, node.parendElement,
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
返回第一个子节点：node.firstChild
返回最后一个子节点： node.lastChild
返回同属上一个子节点：node.nextSibling
返回同属下一个子节点：node.previousSibling
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ,所以大家只要记得有parentElement和children就行了

2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
（1）创建新节点
   createDocumentFragment() //创建一个DOM片段
   createElement() //创建一个具体的元素
   createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
   appendChild()
   removeChild()
   replaceChild()
   insertBefore()
（3）查找
   getElementsByTagName() //通过标签名称
   getElementsByName() //通过元素的Name属性的值
   getElementById() //通过元素Id，唯一性

3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
  IE 5.5: div -> body -> document
  IE 6.0: div -> body -> html -> document
  Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
  DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。