querySelectorAll和getElementsByClassName的区别

一、问题

在写表单验证时出现了一个问题

    <div class="block">
        <label for="username">账户：</label><input type="text" name="username" class="in">
        <div class="er_wrap">
            <span class="success"></span>
        </div>
    </div>

选取success的时候用getElementsByClassName来选择

            {
                success[index].className = "error";
                success[index].innerHTML = this.errorlist[4].error;
            }

实现功能当input中没有写时要提示账户不能为空且将这个span的class改成error，但是class名字已经改成了error，用success[index]选择的则是第index个success类名的input，当我用querySelectorAll来选择success类名的span时则可以选择到改为error的span

二、二者的比较

两者的相同点：返回值都是一个nodelList集合

查阅资料发现querySelectorAll和getElementsByClassName的区别如下

1、document.getElementsByClassName兼容IE9及以上，是动态查询的过程，会随着dom结构的变化，得到的结点列表也会发生变化

<div class="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<script>
    var block=document.getElementsByClassName("block");
    var wrap=document.getElementsByClassName("wrap")[0];
    for(var i=0;i<block.length;i++){
        block[i].style.backgroundColor="red";
    }
</script>

得到图

当改变第二个div的类名时

<div class="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<script>
    var block=document.getElementsByClassName("block");
    var wrap=document.getElementsByClassName("wrap")[0];
    block[1].className="b";
    for(var i=0;i<block.length;i++){
        block[i].style.backgroundColor="red";
    }
</script>

得到左面的图

可以看见即使dom结构改变，也可以动态的改变获取到的节点列表

2、querySelectorAll是css3中新增的选择器，兼容IE8及以上，得到的是一个静态列表，它不会对dom结构进行动态查询，也就是说不是实时的

<div class="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<script>
    var block=document.querySelectorAll(".block");
    var wrap=document.getElementsByClassName("wrap")[0];
    for(var i=0;i<block.length;i++){
        block[i].style.backgroundColor="red";
    }
</script>

将一个div的class改为b

<div class="wrap">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<script>
    var block=document.querySelectorAll(".block");
    var wrap=document.getElementsByClassName("wrap")[0];
    block[1].className="b";
    for(var i=0;i<block.length;i++){
        block[i].style.backgroundColor="red";
    }
</script>

得到