如何使用JavaScript将指定HTML class的所有元素提取到数组中

核心逻辑说明 #

你之前Array.from不生效基本都是DOM未加载完成就执行JS、或者选择器写错导致的，下面是可直接运行的完整实现： #

1. 先补全必要的CSS #

z-index仅对非static定位的元素生效，先给卡片加定位属性：

.card {
  position: relative;
  /* 保留你原有卡片的宽高、边距等样式即可 */
}

2. JS实现逻辑 #

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有卡片元素，返回NodeList类数组
  const cardNodes = document.querySelectorAll('.card');
  // 转成真实数组，两种写法都可以，按需选一种
  // 写法1：用Array.from
  const cardArray = Array.from(cardNodes);
  // 写法2：用push逐个添加
  // const cardArray = [];
  // cardNodes.forEach(card => cardArray.push(card));

  const total = cardArray.length;
  // 遍历分配初始z-index + 绑定hover事件
  cardArray.forEach((card, idx) => {
    // 排在前面的卡片z-index更高，实现降序堆叠
    const initZ = total - idx;
    card.style.zIndex = initZ;
    card.dataset.originZ = initZ;

    // hover时置顶
    card.addEventListener('mouseenter', () => {
      card.style.zIndex = total + 1;
    });
    // 移出后恢复原有层级
    card.addEventListener('mouseleave', () => {
      card.style.zIndex = card.dataset.originZ;
    });
  });

  // 后续卡片列表更新时，重新执行上述遍历赋值逻辑即可
})

常见问题排查 #

• 如果还是拿不到元素，检查卡片的class是否确实为card，有没有拼写错误
• 不要把JS写在<head>里且不加DOM加载监听，会导致页面还没渲染完就执行代码，拿不到元素

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