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

document.querySelectorAll(".card, .imageDiv")是获取class为card或imageDiv的元素，getElementsByClassName("card imageDiv")是获取class同时包含card和imageDiv的元素。

// 获取所有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()。


这些都是静态查询，添加元素后要重新调用才能获取到新的元素。

var moveDivs = [];

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

这样每次调用selectMode()就会重新查询。