querySelector和querySelectorAll小问题

我们可以使用 document.getElementById 这种来获取 dom 元素，但是我们更多使用 document.querySelector 这种来更方便的寻找 dom 元素。

问题

document.querySelector 是存在一个问题的，它是静态的。

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
<div></div>
<div></div>
<script>
    var div = document.querySelectorAll('div');
    var newDiv = document.createElement('div');
    document.body.appendChild(newDiv);
    for (var i = 0; i < div.length; i++) {
        div[i].style.background = 'red';
    }
</script>

我们会发现，div 一个都没有点亮，这是因为 querySelectorAll 拿到是一个静态列表，只要我们后续对元素改动，那么所有的都会失效。


修改，我们可以再appendChild 之后。重新获取一次静态列表即可。
var div = document.querySelectorAll('div');

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
</style>
<div></div>
<div></div>
<script>
    var div = document.getElementsByTagName('div');
    var newDiv = document.createElement('div');
    document.body.appendChild(newDiv);
    for (var i = 0; i < div.length; i++) {
        div[i].style.background = 'red';
    }
</script>

我们可以发现都点亮了，所以 getElementsByTagName 是获取的动态列表，只要后续添加，就可以动态加入。