JS节点查找笔记

要想获得未曾拥有的东西，就必须付出未曾有过的努力。

习惯了JQ的方便DOM节点查询，或许你已经忘记了js原生的一些查询操作了吧，下面列出js的节点查询，方便要用到的时候能快速找到：

html结构：

< div  class = "main" >    < div  class = "div1" ></ div >    < div  id = "oDiv"  class = "div2" >       < h1 >我是h1节点</ h1 >      < p >我是p节点</ p >      < span >我是span节点</ span >    </ div >    < div  class = "div3" ></ div > </ div >

js:

var  s = document.getElementById( "oDiv" );   var  chils= s.childNodes;   //得到s的全部子节点——3个，分别是h1、p、span   var  par=s.parentNode;    //得到s的父节点—— class为main的div节点   var  ns=s.nextSbiling;    //获得s的下一个兄弟节点—— class为div3的div节点   var  ps=s.previousSbiling;   //得到s的上一个兄弟节点—— class为div1的div节点   var  fc=s.firstChild;    //获得s的第一个子节点—— h1节点   var  lc=s.lastChile;    //获得s的最后一个子节点—— span节点

这里要注意下，因为js获取上一个、下一个节点有空文本是否算为一个节点的兼容性问题（FF会将空白、换行等文本信息也当做childNodes中的一员，而IE则会忽略它们，只将DOM节点当做是childNodes的一员），所以这里要先过解决这个兼容性问题：

比如处理下一个节点的兼容：

function  getNextNode(node){      node= typeof  node== "string" ?document.getElementById(node):node;      var  nextNode=node.nextSibling;      if (!nextNode) return  null ;      if (!document.all){   //FF不识别document.all          while ( true ){              if (nextNode.nodeType==1){                  break ;              } else {                  if (nextNode.nextSibling){                      nextNode=nextNode.nextSibling;                  } else {                      break ;                  }              }          }      }      return  nextNode; }