あまり使う機会はないかもしれませんが、javascriptを使って画面側で要素の値を取って、配列に入れて操作するようなケースになります。クライアントワークでの仕様でコーディングしたこともあり、メモとして残しておきたいと思います。   用途としてはいろんなパターンで応用できますが、ここでは複数のimg要素の各種属性値を取得してそれぞれ個別に出力するという形でサンプルをあげています。以下、実際のソースコードになります。 【HTML】※一部省略

<ul id="target_list">
  <li><img src="./img/sample_01.jpg" alt="Image 1" data-name="○○○○○○○○○" data-price="￥500">
  </li>
  <li><img src="./img/sample_02.jpg" alt="Image 2" data-name="○○○○○○○○○" data-price="￥400">
  </li>
  <li><img src="./img/sample_03.jpg" alt="Image 3" data-name="○○○○○○○○○" data-price="￥100">
  </li>
  <li><img src="./img/sample_04.jpg" alt="Image 4" data-name="○○○○○○○○○" data-price="￥200">
  </li>
</ul>
<ul id="output_list">
</ul>

  【javascript】

const outputElem = document.getElementById('output_list');
const targetElem = document.querySelectorAll('#target_list li img');
const targetCount = targetElem.length;
let textArray = [];
let priceArray = [];
for (let i = 0; i < targetCount; i++) {
  textArray.push(targetElem[i].getAttribute('data-name'));
  priceArray.push(targetElem[i].getAttribute('data-price'));
  let num = i + 1;
  const html = '<li>' + num + '枚目の画像の「' + textArray[i] + '」は価格が「' + priceArray[i] + '」です</li>';
  outputElem.innerHTML += html;
}

  HTMLでは今回対象となるimg要素にそれぞれ属性と値を設定しておきます。つぎにJavaScriptで要素を取得して値を操作していきます。まずは、出力先の要素と対象となるimg要素を取得します。そしてimg要素の数量も合わせて取得しておきます。そして、属性ごとに空の配列を用意します。   続いてfor文で要素の数量分だけループさせていきます、この時にそれぞれの属性値を配列に入れていきます。属性値を配列に入れたのち、配列の中身をそれぞれ取り出し出力側の要素を表示させていきます。数をカウントさせる場合、インデックスは0から始まるので注意が必要です。そして、値が入ったHTMLを挿入していきます。   これで、複数要素のそれぞれの属性値を個別に出力することができました。今回のサンプルはこちらにあげています。  

See the Pen rQmyOZ by designsupply (@designsupply) on CodePen.

  使うシーンは限定的ですが、いろんな応用ができるかもしれません、、またいい応用例があれば別記事にてまとめておきたいと思います。