XML操作教程:整合dom节点操作技巧发布

　　一、节点的定义

　　dom节点树

　　图中可见节点HTML文档中的每个成分都是一个节点:

• 整个文档是一个文档节点
• 每个HTML标签是一个元素节点
• 包含在HTML元素中的文本是文本节点
• 每个HTML属性是一个属性节点
• 注释属于注释节点

备注：通过DOM，可以访问HTML文档中的每个节点。

二、节点引用

节点的绝对引用：

• document.documentElement返回文档的根节点
• document.activeElement返回当前文档中被击活的标签节点
• event.fromElement返回鼠标移出的源节点
• event.toElement返回鼠标移入的源节点
• event.srcElement返回激活事件的源节点

节点的相对引用：(设当前对节点为node)

• node.parentNode node.parentElement 返回父节点,document.parentNode()返回null
• node.childNodes[1] 符合标准，返回子节点集合（包含文本节点及标签节点），文本和属性节点的childNodes永远是null.先获取长度node.childNodes.length,然后可以通过循环或者索引找到需要的节点.
  //对与文本节点的处理：
  eg:
  var myTextNodes = document.getElementById("test").childNodes;
  var count = myTextNodes.length;
  for(var i = 0; i < count; i++) {
    if(myTextNodes[i].nodeType=="3" && myTextNodes[i].nodeName!="#text"){//排除IE空白文本的节点
    alert(myTextNodes[i]）;
  }
  }
• node.children 不符合标准，不推荐使用，它只返回html节点，甚至不返回文本节点
• node.firstChild返回第一个子节点，firstChild=childNodes[0]
• node.lastChild返回最后一个子节点，lastChide=childNodes[childNodes.length-1]
• node.nextSibling()返回同属下一个节点
• node.previousSibling()返回同属上一个节点

  三、节点操作

  节点定位

  getElementById(elementId)
  //寻找一个有着给定id属性值的元素，返回一个元素节点 ,document.getElementById(IDvalue)
  getElementsByTagName(tagName)
  //用于寻找有着给定标签名的所有元素，document.getElementsByTagName(tagName)
  getElementsByName(elementName)
  //在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可

  创建节点：

  document.createElement(element)
  //参数为要新添的节点标签名，egnewnode=document.createElement("div");
  document.createTextNode(string)
  //创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");
  eg：
  var a =document.createElement("span");
  var b =document.createTextNode("cssrain");
  a.appendChild(b);

  添加节点:

  //添加子节点：
  node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)
  //插入节点
  node.insertBefore(newNode,targetNode)
  node.insertAfter(newNode,targetNode);

  修改节点：

   //删除节点
  node.remove()[2] //当某个节点被remove方法删除时，这个节点所包含的所有子节点将同时被删除。
  node.removeChild(node) //eg:document.body.removeChild(node)
  node.removeNode()//IE支持，但FF不支持,推荐用removeChild代替实现
  //替换节点
  node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。
  node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法，其他浏览器则不支持。

  复制节点：