JavaScript中.firstChild的替代方案：如何精准检测xMark元素？

你之前用slots[0] === xMark不生效的核心原因是：每次点击时创建的xMark都是全新的DOM对象，即使元素结构完全一致，它们的内存引用也不相同，所以全等比较永远不会成立。下面给你几个可行的精准判断方案：

方案1：给X标记元素添加专属类名 #

创建元素时给它加一个唯一类名，后续通过类名检测元素是否存在：

slots.forEach(slot => {
    slot.addEventListener('click', e => {
        const xMark = document.createElement('img');
        xMark.setAttribute('src', './assets/icon-x.svg');
        // 添加专属类名
        xMark.classList.add('x-mark');
        slot.appendChild(xMark);

        // 检查前3个slot是否都包含x-mark类的元素
        const allHaveX = slots.slice(0, 3).every(slot => slot.querySelector('.x-mark') !== null);
        if (allHaveX) {
            console.log('u won');
        }
    }); 
});

方案2：通过元素的src属性判断 #

利用X标记固定的src路径来精准匹配：

slots.forEach(slot => {
    slot.addEventListener('click', e => {
        const xMark = document.createElement('img');
        xMark.setAttribute('src', './assets/icon-x.svg');
        slot.appendChild(xMark);

        // 检查前3个slot的子元素是否是目标img
        const allHaveX = slots.slice(0, 3).every(slot => {
            const child = slot.firstChild;
            // 验证标签类型+src路径
            return child && child.tagName === 'IMG' && child.src.endsWith('/assets/icon-x.svg');
        });
        if (allHaveX) {
            console.log('u won');
        }
    }); 
});

注意：src会被浏览器解析为绝对路径，所以用endsWith比直接全等匹配更稳妥。

方案3：添加自定义数据属性 #

给X标记元素添加自定义属性，通过属性检测判断：

slots.forEach(slot => {
    slot.addEventListener('click', e => {
        const xMark = document.createElement('img');
        xMark.setAttribute('src', './assets/icon-x.svg');
        // 添加自定义属性
        xMark.dataset.markType = 'x';
        slot.appendChild(xMark);

        // 检查前3个slot是否有带指定属性的元素
        const allHaveX = slots.slice(0, 3).every(slot => slot.querySelector('[data-mark-type="x"]') !== null);
        if (allHaveX) {
            console.log('u won');
        }
    }); 
});

这三个方案都能实现精准判断，推荐用类名或自定义属性的方式，可读性和扩展性更好。

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