本人纯菜鸟,老师布置的一个作业:“获取所有li节点的第一个子节点,并把里面的内容拼接成字符串,输出。获取所有li节点的末尾子节点,并把里面的内容拼接成字符串,输出。”body由老师给出。我写的代码如下:
问题1:为什么只能用IE实现,而我机器上的谷歌和火狐都不能实现呢(后2个弹出的是undefined)?
问题2:IE在获取li的末节点时候,怎么像<span>和<a>都获取的为undefined(IE也如此),什么原因?那该怎么获取?
最后,先谢谢各位大侠了,我在入门阶段,大大们多多指教,谢谢了。<!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>无标题页</title>
    <script type="text/javascript">
    window.onload=function()
    {
    var lilist=document.getElementsByTagName("li");
    var strlif="";
    var strlil="";
    for(var i=0;i<lilist.length;i++)
    {
    strlif+=" "+lilist[i].firstChild.innerHTML;
    strlil+=" "+lilist[i].lastChild.innerHTML;
    }
    alert("firstChild:"+strlif);
    alert("lastChild:"+strlil);
    }
    </script>
</head>
<body>
获取所有li节点的第一个子节点,并把里面的内容拼接成字符串,输出。获取所有li节点的末尾子节点,并把里面的内容拼接成字符串,输出。    <ul>        <li>            <h1>第一子节点h1</h1>            <span>末尾节点span</span>        </li>        <li>            <h2>                第一子节点h2</h2>                <div>                末尾节点div</div>        </li>        <li>            <h3>                第一子节点h3</h3>                <a>                末尾节点a</a>        </li>        <li>            <h4>                第一子节点h4</h4>                <span>                末尾节点span</span>        </li>        <li>            <h5>                第一子节点h5</h5>                <div>                末尾节点div</div>        </li>    </ul></body>
</html>

解决方案 »

  1.   

    把中间获取拼接的那段代码改为下面的,IE可以实现,是不是用lastChild不能获取出了div之外的节点?    for(var i=0;i<lilist.length;i++)
        {
        strlif+=" "+lilist[i].firstChild.innerHTML;
        strlil+=" "+lilist[i].firstChild.nextSibling.innerHTML;
        }
      

  2.   

    火狐会把无意义的换行,或者空格都作为一个DOM节点。
    所以你会发现firstChild.innerHTML或者lastChild.innerHTML成了undefined。
    用下面的代码马上就实现了:
    <!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>无标题页</title>
        <script type="text/javascript">
        window.onload=function()
        {
        var lilist=document.getElementsByTagName("li");
        var strlif="";
        var strlil="";
        for(var i=0;i<lilist.length;i++)
        {
        strlif+=" "+lilist[i].firstChild.innerHTML;
        strlil+=" "+lilist[i].lastChild.innerHTML;
        }
        alert("firstChild:"+strlif);
        alert("lastChild:"+strlil);
        }
        </script>
    </head>
    <body>
    获取所有li节点的第一个子节点,并把里面的内容拼接成字符串,输出。
    获取所有li节点的末尾子节点,并把里面的内容拼接成字符串,输出。
        <ul>
            <li><h1>第一子节点h1</h1><span>末尾节点span</span></li>
    <li><h2>第一子节点h2</h2><div>末尾节点div</div></li>
            <li><h3>第一子节点h3</h3><a>末尾节点a</a></li>
            <li><h4>第一子节点h4</h4><span>末尾节点span</span></li>
            <li><h5>第一子节点h5</h5><div>末尾节点div</div></li>
        </ul>
    </body>
    </html>
    个人建议,最好还是用遍历节点的方式取值,而不是采用FIRST/LASTCHILD这种方式。另外代码规范你还要多学习一下。