Javascript如何获取innerHTML中的所有值然后再根据值改变div的背景颜色

问题背景 :
想制作一个网页，div中的背景颜色根据标签中的值变化。

img

img

img

img


使用innerHTML取值只能取一个值，怎么样将所有值取出加以判断？

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .type{background: red;width: 20px;}
        </style>
    </head>
    <body>
    <div class="type">1</div>
    <div class="type">2</div>
    <div class="type">3</div>
    <div class="type">4</div>
    <div class="type">5</div>
    <div class="type">6</div>
    </body>
</html>
<script>
    var type = document.getElementsByClassName('type')
    for(var i=0; i<type.length;i++){
        if(type[i].innerHTML==='2'){
            type[i].style.backgroundColor='blue'
        }
    }
</script>

问题出在选择器 你这个选择器只能选一个 可以使用querySelectorAll 获取全部符合的标签