IE跟谷歌浏览器有什么不同？

大神带我飞 2011-05-30 11:21:36

本人纯菜鸟，老师布置的一个作业：“获取所有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>

...全文

357 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

sgd 2011-05-30

打赏
举报

用各种浏览器输出Li的所有子节点看看
再决定逻辑怎么写

xej0909 2011-05-30

打赏
举报

火狐会把无意义的换行，或者空格都作为一个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这种方式。

另外代码规范你还要多学习一下。

大神带我飞 2011-05-30

打赏
举报

但是谷歌和火狐还是不行？导致这种情况的是什么原因？
[Quote=引用 1 楼 cskingq 的回复:]

把中间获取拼接的那段代码改为下面的，IE可以实现，是不是用lastChild不能获取出了div之外的节点？
JScript code

for(var i=0;i<lilist.length;i++)
{
strlif+=" "+lilist[i].firstChild.innerHTML;
strlil+=" "+lilist[i].firstChild.n……
[/Quote]

大神带我飞 2011-05-30

打赏
举报

把中间获取拼接的那段代码改为下面的，IE可以实现，是不是用lastChild不能获取出了div之外的节点？



    for(var i=0;i<lilist.length;i++)

    {

    strlif+=" "+lilist[i].firstChild.innerHTML;

    strlil+=" "+lilist[i].firstChild.nextSibling.innerHTML;

    }