js动态查询指定class名的所有元素，querySelectorAll()和querySelectorAll()的区别

"document.querySelectorAll()"方法返回的是一个静态的 NodeList（节点列表），即它只能在页面刚加载时获取到一次，之后即使有新的元素符合选择器，它也不会再重新获取。如果你想动态地获取到新增的元素，可以使用 "document.getElementsByClassName()"或 "document.getElementsByTagName()"。这些方法返回的是一个 HTMLCollection（HTML 元素集合），它们是动态的，可以在任何时候获取到所有匹配的元素，包括新增的元素。

使用上需要注意两者的差别，例子：

// 获取所有class为"card"和"imageDiv"的元素，将他们的鼠标指针样式改成移动图标
var moveDivs = document.querySelectorAll(".card, .imageDiv");

function selectMode() {
    moveDivs.forEach(function(moveDiv) {
        // 修改鼠标指针样式为'move'
        moveDiv.style.cursor = "move";
    });
}

上面是querySelectorAll()的示例，下面是getElementsByClassName()的示例。

var moveDivs = document.getElementsByClassName("card imageDiv");

function selectMode() {
    for (var i = 0; i < moveDivs.length; i++) {
        moveDivs[i].style.cursor = "move";
    }
}

getElementsByClassName()不需要使用逗号分隔多个类名，而是将它们作为一个空格分隔的单一字符串传递给getElementsByClassName()方法。getElementsByClassName()不支持forEach()，如果想要在一个 HTMLCollection 中遍历元素，需要使用for循环，而不是forEach()。