我想知道这两段代码问题是出现在哪里的？？

这个是使用li的标签，在鼠标移到“左右”上时候，背景色变灰色
将li标签换div标签，为什么就会出现问题？第一个左右可以实现背景变灰，第二个没反应？？是什么原因？<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function() {
   var list = document.getElementsByTagName("li");
    for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i]);
}
function rolinItem(obj) {
var head = getFirstChild(obj);  
head.onmouseover = function() {
this.style.background = "#EFEFEF";
  }
}
function getFirstChild(obj) {
var result = obj.firstChild;   //firstChild是第一个节点
while (!result.tagName) {
result = result.nextSibling;
}
return result;
    }
}
</script>
</head>
<body>
<ul>
<li>
   <div>左右</div>
   <div>shangxia</div>
</li>
<li>
   <div>左右</div>
   <div>shangxia</div>
</li>
</ul>
</body>
</html><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function() {
   var list = document.getElementsByTagName("div");
    for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i]);
}
function rolinItem(obj) {
var head = getFirstChild(obj);  
head.onmouseover = function() {
this.style.background = "#EFEFEF";
  }
}
function getFirstChild(obj) {
var result = obj.firstChild;   //firstChild是第一个节点
while (!result.tagName) {
result = result.nextSibling;
}
return result;
    }
}
</script>
</head>
<body>
<div>
   <div>左右</div>
   <div>shangxia</div>
</div>
<div>
   <div>左右</div>
   <div>shangxia</div>
</div>
</body>
</html>
document.getElementsByTagName("div")是取得所有的div标签，应该按照取第一个节点来循环，应该还是可以实现吧？？
就是这里弄不懂

解决方案 »

  1.   

    在代码1中,因为只有两个Li,所以,var list = document.getElementsByTagName("li");执行完后,只会读取这两个li,所以,程序成功.在代码2中,你有两个外部div,每个外部div各内嵌两个内部div,   
    因此，var list = document.getElementsByTagName("div");执行后，顺序为第一个外部div,第一个外部div内部的第一个div,第一个外部div内部的第二个div, 第二个外部div，第二个外部div内部的第一个div,第二个外部div内部的第二个div，总共六个。但是当代码执行到求第一个外部div内部的第一个div的firstChild时，因为，找不到它的firstChild（不存在嘛），所以，代码出错，停止执行。我分别在两个代码中添加了一些语句用于看到真实效果代码1：
    <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题文档</title> 
    <script> 
    window.onload = function() { 
    var list = document.getElementsByTagName("li"); 
    for (var i=0; i<list.length; i++) {
    var tmp = new rolinItem(list[i]); 
    }

    function rolinItem(obj) { 
    var head = getFirstChild(obj); 
    head.onmouseover = function() { 
    this.style.background = "#EFEFEF";
    }
    } 
    function getFirstChild(obj) {
    alert("obj is: "+obj.value);
    var result = obj.firstChild; //firstChild是第一个节点  
    alert("result is: "+result.value);
    while (!result.tagName){ 
    result = result.nextSibling; 
    } 
    return result; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <ul>
    <li value="1"> 
    <div value="1.1">左右</div>  
    <div value="1.2">shangxia</div> 
    </li> 
    <li value="2">  
    <div value="2.1">左右</div> 
    <div value="2.2">shangxia</div> 
    </li> 
    </ul> 
    </body> 
    </html>代码2：
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    window.onload = function() {
    var list = document.getElementsByTagName("div");
    for (var i=0; i<list.length; i++) {
    var tmp = new rolinItem(list[i]);
    }

    function rolinItem(obj) {
    var head = getFirstChild(obj);  
    head.onmouseover = function() {
    this.style.background = "#EFEFEF";
    }
    }

    function getFirstChild(obj) {
    alert("obj is: "+obj.value);
    var result = obj.firstChild;   //firstChild是第一个节点
    alert("result is: "+result.value);
    while (!result.tagName) {
    result = result.nextSibling;
    }
    return result;
    }
    }
    </script></head>
    <body>
    <div value="1">
    <div value="1.1">左右</div>
    <div value="1.2">shangxia</div>
    </div>
    <div value="2">
    <div value="2.1">左右</div>
    <div value="2.2">shangxia</div>
    </div>
    </body>
    </html>希望这些对你有帮助