今日完成：

彻底完成了任务4-1的页面。以及把任务4后续css页面写出来了。

完成思路：

1首先在html页面里写了一个格子的样式。然后在JS里面获取格子ID，接下来把保存在数组里的第一个数据内容写在格子里。

2 第二部，遍历数组的长度-1.因为上一步已经写了一个数据。，每遍历一次，就克隆一次这个格子。

3第三步 ，每克隆一个格子，就按顺序把数组的内容写一次到格子里。

明日计划：

继续任务4

昨天遇到的问题：

第一个遇到的问题。克隆出来格子。把覆盖在格子表面的图片给弄没了。实在弄不出来，然后去找师姐帮忙。师姐看了下原来是我把格子上部分的内容一起改了，

改之前

<div id="role"  class="topbox">
<img  class="topbox-img"  src="../task2img/ptt.png">
</div>

改之后

<div   class="topbox">
<div id="role"></div>
<img  class="topbox-img"  src="../task2img/ptt.png">
</div>

这样写内容就不会把下面的图片给覆盖了。

第二个问题：就是顺序的问题了。

克隆出来的页面，是这样的

解决思路：师姐给我讲我了很久，很有耐新，原因就是我每次克隆后，改变的不是克隆出来的那个，一直在改变第一个。

            后来就重新获取克隆那个节点，在获取子节点，在改变子节点的元素。

JS问题代码：

arrPersonStr=localStorage.sth;
arrPerson = JSON.parse(arrPersonStr);
console.log("读取的字符串"+arrPerson+"数组的长度"+arrPerson.length);
window.onload = function () {
var sourceNode = document.getElementById("div"); // 获得被克隆的节点对象
   var changerole = document.getElementById("role");
changerole.innerText = arrPerson[0];//先改变第一个
   var changesum = document.getElementById("identity");
changesum.innerHTML ="1号";
for (var i = 1; i < arrPerson.length; i++) {
var clonedNode = sourceNode.cloneNode(true); // 克隆节点
       clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复

       sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
       changerole.setAttribute("id", "role-" + i);// 修改一下子节点id 值，避免id 重复

       changesum.setAttribute("id", "identity-" +i);// 修改一下子节点id 值，避免id 重复

       var changerole = document.getElementById( "role-" + i)//
       var changesum = document.getElementById("identity-" +i);
changerole.innerText = arrPerson[i];//改变文本节点的内容
       changesum.innerHTML = (i+1)+"号";//改变子节点的内容

   }

}

JS 修改好的代码

arrPersonStr=localStorage.sth;
arrPerson = JSON.parse(arrPersonStr);
console.log("读取的字符串"+arrPerson+"数组的长度"+arrPerson.length);
window.onload = function () {
    var sourceNode = document.getElementById("div"); // 获得被克隆的节点对象
    var changerole = document.getElementById("role");
    changerole.innerText = arrPerson[0];//先改变第一个
    var changesum = document.getElementById("identity");
    changesum.innerHTML ="1号";
    for (var i = 1; i < arrPerson.length; i++) {
        var clonedNode = sourceNode.cloneNode(true); // 克隆节点
        clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复

        sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
          clonedNode = document.getElementById("div-"+i);
        // changerole.setAttribute("id", "role-" + i);// 修改一下子节点id 值，避免id 重复
        //
        // changesum.setAttribute("id", "identity-" +i);// 修改一下子节点id 值，避免id 重复

        // var changerole = clonedNode.getElementById( "role" )//
        var changerole = clonedNode.children[0].children[0];//获取子节点，的子节点
        var changesum = document.getElementById("div-"+i).getElementsByTagName("p");//获取子节点
        changerole.innerText = arrPerson[i];//改变文本节点的内容
        changesum[0].innerHTML = (i+1)+"号";//改变子节点的内容

    }

}

改好后的页面

今日收获;

完成了任务4 的一部分，对获取节点，子节点更加熟悉了。

1.用children

如：我上面的

var changerole = clonedNode.children[0].children[0];

2.

document.getElementById("div-"+i).getElementsByTagName("p")

3.还有一种获取全部的，

var b =document.getElementById("test").childNodes;

但是第三种方法还是有点缺点，因为浏览器的问题，获取的子节点不一样，所以还要经过处理。

4，用jQuery,这种方法还没了解。暂时就这么多 了，

这是链接http://blog.csdn.net/duanshuyong/article/details/7562423/想了解的点击这个链接