如何在querySelectorAll中控制元素？实现不同图片点击输出不同文本

你之前用elem[0]没用的原因很简单：forEach循环里的elem是单个DOM元素，不是querySelectorAll返回的NodeList集合，所以不存在elem[0]这种写法。下面给你三种可行的实现方式：

方法一：利用循环索引区分 #

通过forEach的第二个参数（元素在集合中的索引）判断当前点击的是哪张图，输出对应文本：

document.querySelectorAll('.penguin').forEach(function(elem, index) {
    elem.addEventListener('click', function() {
        if (index === 0) {
            console.log('第一张图片被点击啦');
        } else {
            console.log('第二张图片被点击啦');
        }
    });
});

方法二：用自定义属性存储文本 #

给每张图片添加自定义data-*属性，点击时直接读取属性值输出，后续新增图片也不用修改JS逻辑：
修改后的HTML：

<img class="penguin" data-click-text="这是第一张企鹅图的点击文本" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">
<img class="penguin" data-click-text="这是第二张企鹅图的点击文本" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">

对应的JS：

document.querySelectorAll('.penguin').forEach(function(elem) {
    elem.addEventListener('click', function() {
        console.log(this.dataset.clickText);
    });
});

方法三：单独获取每个元素绑定事件 #

先保存querySelectorAll返回的集合，再通过索引单独访问元素绑定事件：

let penguinImgs = document.querySelectorAll('.penguin');

// 给第一张图绑定点击事件
penguinImgs[0].addEventListener('click', function() {
    console.log('点击了第一张企鹅图片');
});

// 给第二张图绑定点击事件
penguinImgs[1].addEventListener('click', function() {
    console.log('点击了第二张企鹅图片');
});

注意：你之前的代码里let elements = document.querySelectorAll('.penguin').forEach(...)是错误的，因为forEach没有返回值，elements会是undefined，要保存集合得先单独获取再调用forEach。

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