当然可以用纯JavaScript替代jQuery的这个功能！其实jQuery的.data()方法底层也是基于原生DOM API实现的，下面给你两种实用的实现方式：

方法1：使用dataset属性（推荐） #

原生DOM元素自带的dataset对象可以直接访问所有以data-开头的自定义属性，用法简洁直观：

// 假设cardArray中已经存入了两个选中的<li>元素
if (cardArray[0].dataset.id === cardArray[1].dataset.id) {
    // 两个元素的data-id相同，执行你的业务逻辑
    console.log("两张卡片的ID一致");
} else {
    console.log("两张卡片的ID不同");
}

小提示：dataset会自动处理data-后的驼峰命名（比如data-user-name对应dataset.userName），但你的属性是data-id，直接用dataset.id就可以了。

方法2：使用getAttribute()方法（兼容老浏览器） #

如果需要兼容IE10及以下这类较老的浏览器，可以用getAttribute()直接获取属性值：

if (cardArray[0].getAttribute('data-id') === cardArray[1].getAttribute('data-id')) {
    // 执行对应逻辑
    console.log("两张卡片的ID一致");
}

结合你的场景的完整示例 #

假设你是在卡片点击时将元素存入cardArray，完整的代码示例可以参考这样：

<ul>
    <li class="card" data-id="1"><img src="images/labrys.svg" alt=""></li>
    <li class="card" data-id="2"><img src="images/laurel.svg" alt=""></li>
    <li class="card" data-id="1"><img src="images/another.svg" alt=""></li>
</ul>

<script>
let cardArray = []; // Empty Array for selected card

// 给所有卡片绑定点击事件
document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('click', () => {
        // 限制数组最多存2个元素，方便对比
        if (cardArray.length < 2) {
            cardArray.push(card);
            // 当数组中有两个元素时，立即对比data-id
            if (cardArray.length === 2) {
                const isSameId = cardArray[0].dataset.id === cardArray[1].dataset.id;
                console.log(isSameId ? "ID相同，匹配成功！" : "ID不同，匹配失败");
                // 对比完成后清空数组，准备下一次选择
                cardArray = [];
            }
        }
    });
});
</script>

两种方法都能完美替代jQuery的data('id')对比逻辑，dataset更简洁现代，getAttribute()兼容性更强，根据你的项目需求选择就好~

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