dom初探

<button type="button" class="change">1</button>
        <button type="button">2</button>
        <button type="button">3</button>
        <div class="cont active">第一个框框</div>
        <div class="cont">第二个框框</div>
        <div class="cont">第三个框框</div>
        <script type="text/javascript">
            var btn=document.getElementsByTagName("button")
            var div=document.getElementsByClassName("cont")
            for(var i=0;i<btn.length;i++){
                (function test(n){
                    btn[n].onclick=function(){
                        console.log(123)
                        for(var j=0;j<btn.length;j++){
                            btn[j].className="";
                            div[j].style.display="none";
                        }
                        this.className="change";
                        div[n].style.display="block";
                }
            }(i))

        }

var div=document.createElement("div")
document.body.appendChild(div)

div.style.width="100px"
div.style.height="100px"
div.style.backgroundColor="red";
div.style.position="absolute";
div.style.left="0";
div.style.top="0";
var speed=5;
document.onkeydown=function(e){
    console.log(e.which)
    switch(e.which){
        case 38://上
            div.style.top=parseInt(div.style.top)-speed+"px";
            break;
        case 40://下
            div.style.top=parseInt(div.style.top)+speed+"px";
            break;
        case 37://左
            div.style.left=parseInt(div.style.left)-speed+"px";
            break;
        case 39://右
            div.style.left=parseInt(div.style.left)+speed+"px";
            break;
    }
}