解析段代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <script type="text/javascript">
  <!--
function getText(n){
var strings = [];
getString(n, strings);
return strings.join(""); function getString(n, strings){
if(n.nodeType == 3){
strings.push(n.data);
}
else if(n.nodeType == 1){
for(var m = n.firstChild; m!=null; m = m.nextSibling){ // 主要就是这一个循环 ,谁能给我讲清楚是怎么运行机制而遍历所有的
getString(m, strings);
}
}
}
}
  //-->
  </script>
 </head> <body onload = "alert(getText(document.getElementById('ospan')))">
  this is a <i>Simple</i>document
  <div>
  <span id="ospan">
 <span>IT's<b>Strong</b><b>haha</b>M</span>
  </span>
  </div>
 </body>
</html>主要就是那个循环 它每次循环都递归了 那什么时候能运行到m = m.nextSibling这句啊?

解决方案 »

  1.   

    这是一个递归函数，就是再取子节点文本啦，把每个文本节点的文本（data）放在strings数组里。
      

  2.   

    没有子节点点时（m.nextSibling == null）是退出递归
      

  3.   

    for(var m = n.firstChild; m!=null; m = m.nextSibling)
    这个跟for(var i=0;i<n;i++)本质上是一样的，换成while可能更清晰
    var m=n.firstChild;//初始化m   假设n是“1”，m即为“2”
    while(m!=null){//循环条件 
    //循环体
    m=m.nextSibling//迭代   m为它的下一个同辈（由“2”到“3”，“3”到“fdkajf”，最后为null）
    }
    <div id=1><div id=2><div id=3>fdkajf</div></div></div>功能是找到n的文本的data
      

  4.   

    恩 我知道 for跟while的转化 但现在是 他的循环体是个递归过程 那样当第一次循环 然后先走的循环体 然后才走nextSibling 但循环体就有重新调用函数了啊 那样还能继续往下走nextSibling么
      

  5.   

    但循环体就有重新调用函数了啊 那样还能继续往下走nextSibling么
    ========>
    重新调用函数也有结束的时候，结束的时候就是继续走nextSibling的时候。
      

  6.   

    以下面这段HTML为例  <span id="ospan">
      <span>
      A<b>B</b><b>C</b>
      </span>
      <span>
      D
      </span>
      </span>我写下流程老大们看下
    首先最外层的span走到nodeType==1的分支 然后m =n.firstChild即是第二个span然后 m!=null
    则走进递归分支 重新走getString函数 由于是span又走入nodeType ==1分支 取得了m为文本 
    由于m!=null继续递归这会是文本nodeType==3了 所以不走elseif了然后走nextSibling一直将第一个span
    里的文本走完 但第二个span就不能走了啊
      

  7.   

    第二个span怎么就不能走了呢？给你举个例子，简单点的<span id=s1>
     <span id=s11>
        A<span  id=s111>b</span>
     </span>
     <span id=s12> </span>
    </span>执行顺序
    s1->s11->A-<s111->s12
      

  8.   

    再详细一点。
    s1 : nodetype = 1
    for循环两个子节点。
    第一个先　即：s11 类型 1 再循环  还是两个子节点 第一个A类型为3结束 第二s111类型为1继续循环有一个子节点b 类型为3 结束。第二个就是s12 了，与上同。
     
      

  9.   

    我运行了一下顶楼代码（IE7/FF3）,似乎没似乎没不对；ALERT出来“IT'sStronghahaM”
      

  10.   

    我运行了一下顶楼代码（IE7/FF3）,似乎没什么不对；ALERT出来“IT'sStronghahaM”
      

  11.   

    如果就是为了取节点下的文本可以这样：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <SCRIPT LANGUAGE=javascript>
      <!--
      window.onload=function(){
        var o=document.getElementById('ospan')
        alert(o.innerText||o.textContent)
      }
      //-->
      </SCRIPT> </head> <body>
      this is a <i>Simple</i>document
      <div>
      <span id="ospan">
         <span>IT's<b>Strong</b><a href="#">AAAAAAAAAAAAAAAAAAAAAAAAAAA</a><b>haha</b>M</span>
      </span>
      </div>
     </body>
    </html>