Javascript中getElementById()和.split()方法的奇怪行为

时间:2011-07-14 20:57:56

标签: javascript

<html>
<script type="text/javascript">

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";

};


function executeFunc()  {

    var cookieData=document.cookie.split(';');
    for(entry in cookieData)
    {
        createCookie(cookieData[entry],"",-1); //clear the cookie first
    }
    createCookie("node-1","1",365);
    createCookie("node-2","1",365);
    createCookie("node-3","1",365);

    alert("the cookie contains : " + document.cookie);

    var cookie=document.cookie.split(';');

        for(ele in cookie)
        {
            var node=cookie[ele].split('=');


            alert(node[0]);  //this prints the next node correctly
            var nodeId=document.getElementById(node[0]); //for the first 
                     //iteration i get the row in 
                     //nodeId correctly but for the next iterations, i get null, 
                     //althought the row exists. if i type in the row Id manually 
                     //it works, but if i use node[0] then it returns null !! :S
            alert("the node is : " + nodeId);

            alert(document.cookie);



        }


}


</script>
<body onLoad="executeFunc()">
<table>
<tbody>
<tr id="node-1">
    <td>im node 1</td>
</tr>
<tr id="node-2">
    <td>im node 2</td>
</tr>
<tr id="node-3">
    <td>im node 3</td>
</tr>
</tbody>
</table>

</body>
</html>

首先,我知道如何在Jsfiddle上运行上面的代码,然后将其链接到我的问题。对不起!!

在javascript中的executeFunc()中,我将分割cookie条目并提取“node”变量中的名称。然后使用这个名字,我得到行对象并打印它。当它第一次循环时,一切都按计划进行,但是对于下一次迭代,alert(node[0])打印cookie中的下一个条目(即node-2),但nodeId=document.getElementById(node[0])返回null。如果我将其更改为nodeId=document.getElementById("node-2")它可以正常工作。我不知道prblm是..你可以通过复制粘贴它来测试它...它的完整代码! 谢谢!

2 个答案:

答案 0 :(得分:2)

您的Cookie在每个标识符前面都有一个空格。因此,它试图查找" node-1"并找不到它。您可以在此版本的代码中看到警告文本周围带引号的空格:http://jsfiddle.net/jfriend00/ZS3HB/

我建议在使用之前修改分割到split('; ')或修剪标识符的前导/尾随空格。

答案 1 :(得分:1)

问题在于您在';'上拆分,但每个分号后面都有一个空格,因此第二个节点名称最终为" node-2"而不是"node-2"

如果您在'; '上拆分,则会有效。

或者,您可以从名称中删除空格:

if (node[0].charAt(0) == ' ') {
  node[0] = node[0].substr(1);
}