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. 忽略、移除空白节点

<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)

posted @ 2017-03-23 13:44  Hailinlu  阅读(925)  评论(0编辑  收藏  举报