有点奇妙，来看看getElemntsByTagName问题，


<!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>jquery</title>
    <style type="text/css">
    </style>
</head>
<body>
<div id="div1">
        <input type='text' value='3'>  替换成3<!--经测试这里加个br后就可以了，就算现在注释掉，下面的textarea也能找到了<br/>-->
<textarea>123</textarea>    替换成123 
<select> 
<option value=''>1 </option> 
<option value='' selected>2 </option>
<option value=''>3 </option> 
</select>       替换成2 
</div>
</body>
<script type="text/javascript">
var els=document.getElementsByTagName("*");
var length=els.length;
for(var i=0;i<length;i++) {
var cur=els[i];
if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
switch(cur.nodeName.toUpperCase()) {
case "INPUT":
case "TEXTAREA":
var n=document.createTextNode(cur.value);
cur.parentNode.replaceChild(n,cur);
break;
case "SELECT":
var n=document.createTextNode(cur.options[cur.selectedIndex].text);
cur.parentNode.replaceChild(n,cur);
break;
default:
//alert(cur.nodeName);
break;
}
}
}
</script>
</html>
上面的代码，getElementsByTagName中有textarea，将上面的html中注释去掉后就找不到了
这是什么原因？
点击这里查看注释去掉后的效果

解决方案 »

  1.   

    非常佩服楼主的专研精神，这个问题确实没注意.也确实存在给input加上一个结束标记后，正常
    <input type='text' value='3'></input>
    但是这样加也不行
    <input type='text' value='3'/>或者是干脆去掉input也正常.所以期待高手解说下....
      

  2.   

    换个思路 用cur.type就可以 
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jquery</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="div1">
            <input type='text' value='3'>  替换成3<!--经测试这里加个br后就可以了，就算现在注释掉，下面的textarea也能找到了<br/>-->
            <textarea>123</textarea>    替换成123 
            <select> 
            <option value=''>1 </option> 
            <option value='' selected>2 </option>
            <option value=''>3 </option> 
            </select>       替换成2 
        </div>
    </body>
    <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
       var cur=els[i];
      
        if(cur.type=="textarea")
        {
            var n=document.createTextNode(cur.value);
            cur.parentNode.replaceChild(n,cur);
                       }
       
    }
    </script>
    </html>
      

  4.   

    谢谢
    发代码是不是测试下，关键原因在于getElementsByTagName("*")里面没有textarea不是判断type的问题吧
      

  5.   

    getElementsByTagName("*")里面有textarea，可以这样试试看
    <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
        var cur=els[i];
        if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
                alert(cur.nodeName);
               
            
        }
    }
    </script>
      

  6.   

    其实可以找到,
    楼主把
      case "INPUT":
         break ; //增加
    <!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>jquery</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <div id="div1">
            <input type='text' value='3'>  替换成3
    <textarea>123</textarea>    替换成123 
    <select> 
    <option value=''>1 </option> 
    <option value='' selected>2 </option>
    <option value=''>3 </option> 
    </select>       替换成2 
    </div>
    </body>
    <script type="text/javascript"> 
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
    var cur=els[i];
            alert(cur.tagName);  //完全可以找到textarea
    if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
    switch(cur.nodeName.toUpperCase()) {
    case "INPUT":
    break;
    case "TEXTAREA":
    var n=document.createTextNode(cur.value);
    cur.parentNode.replaceChild(n,cur);
    break;
    case "SELECT":
    var n=document.createTextNode(cur.options[cur.selectedIndex].text);
    cur.parentNode.replaceChild(n,cur);
    break;
    default:
    //alert(cur.nodeName);
    break;
    }
    }
    }
    </script>
    </html>
     */我在ie8下测试正常
      

  7.   

    <!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>jquery</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="div1">
            <input type='text' value='3'/>  替换成3
            <textarea>123</textarea>    替换成123 
            <select> 
            <option value=''>1 </option> 
            <option value='' selected>2 </option>
            <option value=''>3 </option> 
            </select>       替换成2 
        </div>
    </body>
    <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
        var cur=els[i];
        if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
                if(cur.nodeName=="TEXTAREA")
                {
                    var n=document.createTextNode(cur.value);
                    cur.parentNode.replaceChild(n,cur);            }
               
            
        }
    }
    </script>
    </html>
    呵呵 睡觉了 
      

  8.   

    奇怪了
    你现在运行我上面那个链接试试看有没textarea?
      

  9.   

    试了试 就是没有加上break的原因 正如7楼所说 呵呵  当运行到
    input的时候 由于没加break 他会拿着input与textarea进行比较 ，当然没效果了呵呵 
      

  10.   

    这和getElementsByTagName的工作原理有关,当你替换了第一个input之后,它变成了一个文本节点,这样取DIV中的第二个非文本节点时,实际取到的是第三个select如果你加一个<br/>这样<br/>替代了input的非文本节点的位置,所以才能取到textarea你可以将input和textarea对换,就是input没改过来了...
      

  11.   

    你确定，看清楚，替换input时els这个NodeList已经存在了，怎么会因为替换而改变呢？
      

  12.   

    学习了  原来由于在没有break，当第一次遍历到input的时候，把teaxarea替换的效果放到了input的身上，这样导致了dom发生了变化，esl集合就随之变化了,最初input在els集合中是第七位，textarea是第八位，inpu当被替换后，textarea变成了第七位，select变成了第八位了，所以当循环到八的时候，变成了select了 。今天多收了三五斗  呵呵
      

  13.   

    cur 只知道DIV有三个非文本节点...input替换前,textarea是第二个替换后是变成第一个了.而cur不知道,因为己经取过第一个节点了,所以现在取的第二个实际上是第未改变前的第三个节点getElementByTagName是一个黑箱操作,它存的不是页面对象,而是一个页面对象的顺序你给它一个i,它根据顺序取页面上按顺序排列的第i个对象给你
      

  14.   

    嗯  有理 用这个测试下就知道了
    <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    alert("length"+length);
    for(var i=0;i<length;i++) {
    var cur=els[i];
    for(var j=0;j<length;j++)
    {  
       alert(j+" "+els[j].type );
        }
    alert("第一次"+i);
    alert(cur.nodeName);
    if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
    switch(cur.nodeName.toUpperCase()) {
    case "INPUT":alert("第二次"+i);
    case "TEXTAREA":alert("第三次"+i);alert(cur.type);
    var n=document.createTextNode(cur.value);
    cur.parentNode.replaceChild(n,cur);
    break;
    case "SELECT":alert(cur.nodeName);
    var n=document.createTextNode(cur.options[cur.selectedIndex].text);
    cur.parentNode.replaceChild(n,cur);
    break;
    default:
    //alert(cur.nodeName);
    break;
    }
    }
    }
    </script>
      

  15.   

    因为你的网页的第一行申明的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    也就是XHTML模型，每个标记必须有配套的</TAGname> 出现，所以
      

  16.   

    应该和getElementsByTagName有关.
    因为直接搜索textarea是能找得到的.
    通配符*搜索时应该是运行了不同的机制吧.
      

  17.   


    <!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>jquery</title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <div id="div1">
            <input type='text' value='3'/>  替换成3
    <textarea>123</textarea>    替换成123 
    <select> 
    <option value=''>1 </option> 
    <option value='' selected>2 </option> <option value=''>3 </option> 
    </select>       替换成2 
    </div>
    </body>
    <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
    var cur=els[i];
    //alert(cur.nodeName);
    if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
    switch(cur.nodeName.toUpperCase()) {
    case "INPUT":
    case "TEXTAREA":
    i-=1;
    var n=document.createTextNode(cur.value);
    cur.parentNode.replaceChild(n,cur);
    break;
    case "SELECT":
    i-=1;
    var n=document.createTextNode(cur.options[cur.selectedIndex].text);
    cur.parentNode.replaceChild(n,cur);
    break;
    default:
    //alert(cur.nodeName);
    break;
    }
    }
    }
    </script>
    </html>果然~~
      

  18.   


    其实你可以把这个nodelist放在真正的数组里再for就可以了
      

  19.   

    其实我还是没大明白你的意思，你问什么要这要写，写这个代码有什么意思吗？
    下面的代码是你想要的结果么？
    <!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>jquery</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
    var els=document.getElementsByTagName("*");
    var length=els.length;
    for(var i=0;i<length;i++) {
        var cur=els[i];
        if(typeof(cur)!="undefined" && typeof(cur.nodeName)!="undefined") {
            switch(cur.nodeName.toUpperCase()) {
                case "INPUT":
                     var n=document.createTextNode(cur.value);
                     cur.parentNode.replaceChild(n,cur);
                     break;
                case "TEXTAREA":
                    var n=document.createTextNode(cur.value);
                    cur.parentNode.replaceChild(n,cur);
                    break;
                case "SELECT":
                    var n=document.createTextNode(cur.options[cur.selectedIndex].text);
                    cur.parentNode.replaceChild(n,cur);
                    break;
                default:
                    //alert(cur.nodeName);
                    break;
            }
        }
    }
    </script></head>
    <body>
        <div id="div1">
            <input type='text' value='3'/> change3
            <textarea id="areaOne">123 </textarea>change123 
            <select id="selectOne"> 
            <option value=''>1 </option> 
            <option value='' selected>2 </option>
            <option value=''>3 </option> 
            </select> change2 
        </div>
    </body>
    </html>