var render = function(){
            var html='';
            var padding=2;
            
            var winWidth=zWin.width();
            var picWidth=(winWidth-padding*3)/4;
            for(var i = 1;i<=total;i++){
                var imgSrc='img/'+i+'.jpg';
                var p= i%4 == 1? 0:padding;
                html+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-top:2px;padding-left:'+p+'px"><canvas         id="cvs_'+i+'"></canvas></li>'

                var imageObj = new Image();
                imageObj.index=i;
                imageObj.onload = function(){
                    var cvs = $('#cvs_'+this.index)[0].getContext('2d');
                    //经过$包装后成为一个zepto对象，后面加【0】转换dom对象
                    //getContext('2d')绘图环境
                    cvs.width=this.width;
                    cvs.height = this.height;
                    cvs.drawImage(this,0,0);
                }
                imageObj.src = imgSrc;
            }

            $('#container').html(html);
        }
        render();

代码中突出的部分可以看出，在 for 循环中 canvas作为html变量中的字符串存在 ，并未渲染成DOM（循环结束后才通过$('#container').html(html);写入dom），此时为什么可以通过 var cvs = $('#cvs_'+this.index)[0].getContext('2d');获取到该节点？