使用DOM方法递归遍历节点树

DOM子节点遍历

原创于 2016-03-23 14:50:34 发布 · 519 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ViewUI

js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript遍历DOM树中指定父节点下直接子节点的方法。通过递归函数getChildren()实现，该函数不仅可以打印出每个子节点的名字或值，还能进一步递归到更深层次的子节点。

//遍历指定父节点下的直接子节点--使用DOM方法递归遍历节点树
function getChildren(parent){
 console.log(
  parent.nodeType!=3?parent.nodeName:
       		      parent.nodeValue
);
 var childNodes=parent.childNodes;
 for(var i=0;i<childNodes.length;i++){
  getChildren(childNodes[i]);
 }
}
/*
function getChildren(parent){
 var start=parent;
 console.log(
  parent.nodeType!=3?parent.nodeName:
                     parent.nodeValue
 );
 for(;;){
  if(parent.firstChild){
   parent=parent.firstChild;
   console.log(
    parent.nodeType!=3?parent.nodeName:
         parent.nodeValue
   );
  }else if(parent.nextSibling){
   parent=parent.nextSibling;
   console.log(
    parent.nodeType!=3?parent.nodeName:
         parent.nodeValue
   );
  }else{
   parent=parent.parentNode;
   if(parent==start){
    break;
   }else if(parent.nextSibling){
    parent=parent.nextSibling;
    console.log(
     parent.nodeType!=3?parent.nodeName:
            parent.nodeValue
    );
   }
  }
 }
}
 */
window.onload=function(){
 getChildren(document.body);
};