如何将html元素转换为JS中的数组？ [复制]答案

【问题标题】：How to convert html elements to an array in JS? [duplicate]如何将html元素转换为JS中的数组？ [复制]
【发布时间】：2020-01-23 21:52:46
【问题描述】：

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

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

然后我通过 cloneNode() 方法复制了这个，所以网格总共会显示 24 张卡片。现在我想使用以下代码来随机化卡片：

  function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

我假设我需要一个数组才能使其工作，但是如何将卡片转换为数组？我完全迷路了。如果有人可以解释如何以及为什么，我将非常感激。

【问题讨论】：

请注意，您的随机化功能可以分配超过 2 张相同类型的卡片，而少于 2 张其他卡片。您应该将所有卡片随机排列并按顺序分配。要将所有卡片放入类似数组的 HTMLCollection 对象中，您可以迭代：var x = document.getElementsByClassName("card"); 更多信息：w3schools.com/jsref/met_document_getelementsbyclassname.asp
@Jeff 生成 HTMLCollection 对象，而不是数组。
好点，我会修改为正确的。

标签： javascript arrays shuffle

【解决方案1】：

有几种方法可以获取 HTML 元素并将它们放入数组中。请考虑以下行来选择您的元素。

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

您的卡片元素现在存储在NodeList 中，这是一个类数组 对象。将其视为具有索引的对象。您可以使用以下示例将列表转换为数组。

Array.from 方法。
此方法将返回一个新数组，其中包含类数组或可迭代对象的所有索引。

const arr = Array.from(cards);

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

const arr = [...cards];

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

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

循环和推送。
也可以将NodeList 或HTMLCollection 和push 每个元素循环到一个新数组中。

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

【讨论】：

【解决方案2】：

要解决这个问题，我首先要说的是，您不需要将 DOM 对象视为需要随机播放的数组。这是您需要洗牌的图像。

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

然后你将这个对象数组传递给你的函数以对其进行洗牌并使用 JS 更改每个 Dom 对象的 URL

【讨论】：

我会说这是 OP 需要洗牌的牌。卡片有图像。但这是语义;)。
完全同意。但是只是建议OP可以有不同的思维方式，我们不必将DOM对象视为卡片。卡片对象基本上只是图像和附加到它的任何值。我们将对象数据放到 DOM 中。纸牌游戏是洗牌，而不是 DOM 对象。但是，如果对 DOM 对象进行洗牌是一项硬性要求（如类分配），那么这肯定不符合要求......我同意......但如果问题只是创建一个纸牌游戏，洗牌对象数组是比改组 DOM 容易得多。