DOM（2）获取子节点

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

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

　　　　 <div id="box">12
            <div>1</div>
            <div>2</div>
            <p>3</p>
        </div>
                
        <script>
            
            var box =document.getElementById('box');
            alert(box.childNodes.length);//ie返回4，非ie返回7
            for (var i = 0; i < box.childNodes.length; i ++) {
                if (box.childNodes[i].nodeType === 1) {
                    alert('元素节点：' + box.childNodes[i].nodeName);
                } else if (box.childNodes[i].nodeType === 3) {
                    alert('文本节点：' + box.childNodes[i].nodeValue);
                }
            }
            
            //非ie会把文本、换行也算在里面；ie只返回正常元素节点

　　　　　
            
        </script>

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

　　　　 <div id="box">| 
            12  |
            <div>1</div>
            <div>2</div>
            <p>3</p>
        </div>                
        <script>            
            var box =document.getElementById('box');
            alert(box.firstChild.nodeValue);
            alert(box.childNodes[0].nodeValue);
            alert(box.childNodes[box.children.length-1].nodeValue);
            alert(box.lastChild.nodeValue);            
        </script>

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

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

　　　　 
        <p>0</p>
        <div id="box">123</div>    
        <span>123</span>
        <script>            
            var box =document.getElementById('box');    
            alert(box.nextSibling.nodeName); //ie返回span ，跳过div与span间的换行；非ie返回#text ，表示为文本节点 即换行

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

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

　　　　</script>

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

　　　　 <div id="box" title="标题" class="mybox" style="color:red;font-size:16px;">123</div>    
        <script>            
            var box =document.getElementById('box');    
            alert(box.attributes);
            alert(box.attributes.length); //4
            alert(box.attributes[0].nodeName); //id , ie8是title，顺序不一样
            alert(box.attributes[0].nodeValue);//box
            for(var i=0; i<box.attributes.length;i++){
                alert('属性名：'+box.attributes[i].nodeName+'属性值：'+box.attributes[i].nodeValue);
            }         
　　　　　　　　//ie8（别的版本未测）返回的顺序是乱的，   
        </script>

2. 忽略、移除空白节点

　　//忽略空白字符
　　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)

DOM（2）获取子节点

推荐阅读