点击单张图片如何批量修改页面中同标识的所有图片？

首先得纠正你HTML里的一个错误：同一个页面里ID必须唯一，你现在三个图片都用了id="bicycle"，这不符合规范，还会导致JS获取元素出问题，所以先把重复的ID删掉，只保留class。

修正后的HTML代码 #

<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle"></button>
<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle"></button>
<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle"></button>

方法1：用getElementsByClassName批量获取元素 #

这个方法会返回一个元素集合，我们通过循环遍历每个元素来修改图片地址：

function changeImage(){
    // 获取所有class为bicycle的图片
    var imgs = document.getElementsByClassName('bicycle');
    // 遍历集合，逐个修改src属性
    for(var i = 0; i < imgs.length; i++){
        imgs[i].src = 'images/car.jpg';
    }
}

方法2：用querySelectorAll批量获取元素 #

这个方法支持CSS选择器语法，返回的NodeList可以用更简洁的循环遍历：

function changeImage(){
    // 通过CSS类选择器选中所有目标图片
    var imgs = document.querySelectorAll('.bicycle');
    // 用for...of循环遍历修改（支持ES6及以上环境）
    for(let img of imgs){
        img.src = 'images/car.jpg';
    }
    // 也可以用普通for循环，和方法1逻辑一致
    // for(var i = 0; i < imgs.length; i++){
    //     imgs[i].src = 'images/car.jpg';
    // }
}

现在不管点击哪个按钮，所有class为bicycle的图片都会同步更换成汽车图片了。

内容的提问来源于stack exchange，提问作者checolicious