Связать объекты JS с идентификаторами HTML

Question

Можно ли как-нибудь создать несколько объектов JS, каждый из которых относится к отдельному элементу HTML с уникальным идентификатором?Также есть способ, которым я могу сделать это без идентификаторов, например, используя class[1]?

Я не могу найти никаких ответов

HTML

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

JS

var Object1 = {
data1: "This goes with the first DIV"
}
var Object2 = {
data1: "This goes with the second DIV"
}
var Object3 = {
data1: "This goes with the third DIV"
}
var Object4 = {
data1: "This goes with the fourth DIV"
}

Я хочу связать каждый объект JS с его собственным идентификатором / элементом

Answer 1

Вы можете создать массив объектов, используя querySelectorAll и map с ... (распространение), чтобы сделать массив из возвращенного NodeList:

const arr = [...document.querySelectorAll("div.exampleClass")].map(d => ({ data1: d }));
console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: auto; }

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

Как упомянуто @ Phil в комментариях , Array.from может быть снабжено функцией отображения - это делает код более кратким:

const arr = Array.from(document.querySelectorAll("div.exampleClass"), div => ({ data1: div }));
console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: auto; }

<div class="exampleClass" id="example1"> </div>
<div class="exampleClass" id="example2"> </div>
<div class="exampleClass" id="example3"> </div>
<div class="exampleClass" id="example4"> </div>

Answer 2

Вы можете сделать это без идентификатора.map() принимает обратный вызов, а его вторым параметром является текущий индекс элемента, через который осуществляется его итерация.

let divs = [...document.querySelectorAll('.exampleClass')];

let data = divs.map((x,id) => ({[id]:x}));
console.log(data)

<div class="exampleClass"> </div>
<div class="exampleClass"> </div>
<div class="exampleClass"> </div>
<div class="exampleClass"> </div>