nextSibling.nodeName为#text ？？？

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>
<script language="javascript">

function change(obj)
{
if(obj.innerText=="[-]")
{
obj.innerText="[+]";

//下面的alert我测试了下，当前对象的.parentNode.nextSibling.nodeName
//应该是ul，怎么弹出显示的是#text啊？？？
alert(obj.parentNode.nextSibling.nodeName);

next(obj.parentNode).style.display = "none";
}else{
obj.innerText="[-]";
next(obj.parentNode).style.display = "block";
}
}

function next(elem) {//获得下一个元素节点
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);//nodetype=1是元素节点 
        return elem;
    }</script>
<link rel="stylesheet" type="text/css" href="css.css" />
</head><body>
<div>
<p><span onclick="change(this)">[-]</span>aaa</p>
        <ul>
            <li>aaaaaa</li>
            <li>aaaaaa</li>
            <li>aaaaaa</li>
        </ul>
    <p><span onclick="change(this)">[-]</span>bbb</p>
        <ul>
            <li>bbbbbb</li>
            <li>bbbbbb</li>
            <li>bbbbbb</li>
        </ul>
    <p><span onclick="change(this)">[-]</span>ccc</p>
        <ul>
            <li>cccccc</li>
            <li>cccccc</li>
            <li>cccccc</li>
        </ul>
</div>
</body></html>

解决方案 »

  1.   

    firefox等支持W3C规范的浏览器会把换行空白识别为一个NODE，你把中间的换行去掉就可以识别正确的，需要加一个判断
      

  2.   

     function change(obj)
        {
            if(obj.innerText=="[-]")
            {
                obj.innerText="[+]";
                
                //下面的alert我测试了下，当前对象的.parentNode.nextSibling.nodeName
                //应该是ul，怎么弹出显示的是#text啊？？？
                // alert(obj.parentNode.nextSibling.nodeName);
                var test = obj.parentNode.nextSibling;
                if(test.nodeName == "text"){
                    test = test.nextSibling;
                }
                alert(test.nodeName);
                
                next(obj.parentNode).style.display = "none";
            }else{
                obj.innerText="[-]";
                next(obj.parentNode).style.display = "block";
            }
        }