1.节点：元素节点，属性节点，文本节点

(1)childNodes  返回子节点集合，各浏览器有区别，非ie文本、换行（只在两个子节点间） 也算作子节点

　　　　 
     
      12            
      
       1
      
            
      
       2
      
            
      
3
        
     
                        

(2)firstChild , lastChild 获取的是第一个子节点与最后一个子节点，相当于childNodes[0],childNodes[box.childNodes.length-1] ，非ie也会包含文本 或空格，

　　　　 
     
      |             12  |            
      
       1
      
            
      
       2
      
            
      
3
        
     
                        

（3）previousSibling 与nextSibling ,分别表示获取同级节点的上一个节点 ，下一个节点 ，  （包含文本，换行） ，同上有ie与非ie的区别

   parentNode 表示返回节点的父节点，该父节点肯定是元素节点（标签）

　　　　         
0
         
     
      123
     
            123        

　　　　　　　　alert(box.previousSibling.nodeName); //ie返回p ，跳过div与span间的换行；非ie返回#text ，表示为文本节点 即换行

　　　　　　　　alert(box.parentNode.nodeName); //返回BODY ,chrome Firefox ie都支持

（4）attributes ，返回属性的集合

　　　　 
     
      123
     
            

2. 忽略、移除空白节点

<script>

　　//忽略空白字符

　　function filterWhiteNode(node) {

　　　　var ret = [];

　　　　for (var i = 0; i < node.length; i ++) {

　　　　　　if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {

　　　　　　　　continue;

　　　　　　} else {

　　　　　　　　ret.push(node[i]);

　　　　　　}

　　　　}

　　　　return ret;

　　}

</script>

　　

　　//移除空白节点

　　　　function removeWhiteNode(node) {

　　　　　　for (var i = 0; i < node.childNodes.length; i ++) {

　　　　　　　　if (node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {

　　　　　　　　　　node.childNodes[i].parentNode.removeChild(node.childNodes[i]);

　　　　　　　　}

　　　　　　}

　　　　　　return node;

　　　　}

　　　　alert(removeWhiteNode(box).childNodes.length); //返回移除后，的子节点个数

 //注：获取子节点可以用 children ,可以直接跳过空白节点， 如 ， alert(box.children.length)