本人纯菜鸟,老师布置的一个作业:“获取所有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实现,而我机器上的谷歌和火狐都不能实现呢(后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>
{
strlif+=" "+lilist[i].firstChild.innerHTML;
strlil+=" "+lilist[i].firstChild.nextSibling.innerHTML;
}
所以你会发现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这种方式。另外代码规范你还要多学习一下。