为什么出来的不是想要的效果？

Question

<style type="text/css">
    #div1{
        width: 400px;
        height: 300px;
        border: 1px solid skyblue;
    }
    p{
        border: 1px solid lightpink;
    }
    .ps1{
        border: 1px solid red;
        text-align: center;
    }
</style>

<input type="button" value="按钮" id="btn" />
<div id="div1">
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
</div>

<script type="text/javascript">
    //获取按钮
    document.getElementById("btn").onclick=function () {
        //根据className获取P
        var pObj=document.getElementsByClassName("ps");
        for (var i=0;i<pObj.length;i++){
            pObj[i].className="ps1";
        }
    }
</script>

为什么最后出来的效果是这样的？不是每个p标签都应用了ps1类样式，而是跳过一个p应用一个。