Javascript 如何在JS中将html元素转换为数组？

我正在构建一个存储卡游戏作为我的第一个javascript项目。我所做的是用HTML制作一个部分，其中包含12张卡片，如下所示：

    <section id="memorygame">
        <div class="card">
            <img class="front">
            <img class="back"  style="background-image: url(assets/img/banana.png);">
        </div>

---

我假设我需要一个数组来让它工作，但是我如何将这些卡转换成数组呢？我完全迷路了。如果有人能解释一下原因，我会非常感激的

获取HTML元素并将其放入数组有几种方法。 考虑下面的行来选择元素。

const cards = document.querySelectorAll('.card');

您的卡元素现在存储在

节点列表中，节点列表是一个类似数组的对象。将其视为具有索引的对象。您可以使用以下示例将列表转换为数组

方法。

此方法将返回一个新数组，其中包含类似数组或iterable对象的所有索引

const arr = Array.from(cards);

扩展语法。

这是一个ES6特性，它将把每个单独的索引放在一个新数组中。这也是连接数组的一种很好的方法

const arr = [...cards];

切片并调用。

这是一个旧版本，但如果您需要IE11或更少的浏览器支持，那么在大多数情况下都可以使用

var arr = Array.prototype.slice.call(cards);

循环和推送。

还可以循环
节点列表
或
HTMLCollection
并
将每个元素推送到一个新数组中

var arr = [];
for (var i = 0; i < cards.length; i++) {
  arr.push(cards[i]);
}

var arr=[]；
对于（变量i=0；i
要解决这个问题，我首先要说，您不需要将DOM对象视为需要洗牌的数组。这是你需要洗牌的图像

因此，您只需要构建一个图像URL数组。您可能希望它带有标识符，因此它将是一个对象{key:“banana”，url:“assets/img/banana.png”}

然后，将此对象数组传递给函数，对其进行洗牌，并使用JS更改每个Dom对象的URL
注意，您的随机化函数能够分配多于2张相同类型的卡，而其他卡的分配则少于2张。你应该随机排列所有的卡片，并按顺序分配它们。要将所有卡片放入一个类似
HTMLCollection
对象的数组中，您可以迭代：
var x=document.getElementsByClassName（“卡片”）更多信息：@Jeff这是一个
HTMLCollection
对象，而不是一个数组。很好，我会进行编辑以确保正确。我会说这是OP需要洗牌的牌。卡片上有一个图像。但这是语义学；）。完全同意。但是建议OP可以有一种不同的思维方式，我们不需要把DOM对象当作一张卡片。卡片对象基本上就是图像和附加到它的任何值。我们将对象数据放入DOM。纸牌游戏是洗牌，而不是DOM对象。但是，如果对DOM对象进行洗牌是一项困难的要求（如类赋值），那么这肯定不符合要求。。。我同意。。。但是如果问题只是创建一个纸牌游戏，那么洗牌对象数组要比洗牌DOM容易得多。
var arr = [];
for (var i = 0; i < cards.length; i++) {
  arr.push(cards[i]);
}