Как сократить объявление переменных и dom объектов

[WebMachine]

Здравствуйте. Подскажите как можно сократить код в которой идёт присваивание dom объектов к объявленным переменным?

код:

// Ссылки
let buttonA = document.querySelector('#buttonA'); // Категория 1
let buttonA1 = document.querySelector('#buttonA1'); // Категория 1 - Подкатегория 1
let buttonA2 = document.querySelector('#buttonA2'); // Категория 1 - Подкатегория 2
let buttonA3 = document.querySelector('#buttonA3'); // Категория 1 - Подкатегория 3
let buttonB = document.querySelector('#buttonB'); // Категория 2
let buttonC = document.querySelector('#buttonC'); // Категория 3

// Тела категории 1
let a1content1 = document.querySelector('#a1content1');
let a1content2 = document.querySelector('#a1content2');
let a1content3 = document.querySelector('#a1content3');
let a1content4 = document.querySelector('#a1content4');
let a1content5 = document.querySelector('#a1content5');

let a2content1 = document.querySelector('#a2content1');
let a2content2 = document.querySelector('#a2content2');
let a2content3 = document.querySelector('#a2content3');
let a2content4 = document.querySelector('#a2content4');
let a2content5 = document.querySelector('#a2content5');

let a3content1 = document.querySelector('#a3content1');
let a3content2 = document.querySelector('#a3content2');
let a3content3 = document.querySelector('#a3content3');
let a3content4 = document.querySelector('#a3content4');
let a3content5 = document.querySelector('#a3content5');

// Тела категории 2
let bcontent1 = document.querySelector('#bcontent1');
let bcontent2 = document.querySelector('#bcontent2');
let bcontent3 = document.querySelector('#bcontent3');
let bcontent4 = document.querySelector('#bcontent4');
let bcontent5 = document.querySelector('#bcontent5');

// Тела категории 3
let ccontent1 = document.querySelector('#ccontent1');
let ccontent2 = document.querySelector('#ccontent2');
let ccontent3 = document.querySelector('#ccontent3');
let ccontent4 = document.querySelector('#ccontent4');
let ccontent5 = document.querySelector('#ccontent5');

как можно сократить количество кода? Так чтобы кол-во символов и строк было гораздо меньше.
только без нано кода. only Vanilla js

[voraa]

Как то так

const ids = ['buttonA', 'buttonA1',... 'ccontent5'];
let {buttonA, buttonA1, ... ccontent5} = ids.reduce ((obj, name) => (obj[name] = document.querySelector('#'+name), obj), {});

[Aetae]

WebMachine, ты можешь просто удалить весь этот код.)

Нет, серьёзно, для поддержки легаси все id автоматически мапятся в глобальные переменные и врядли когда-то поддержку этой фичи уберут.

<div id="textId">оппа</div>
<script>alert(textId.textContent)</script>

Конечно глобальные переменные могут быть переписаны каким-то другим скриптом, потому их использование не поощряется, однако судя по твоему вопросу и коду - в данном случае это не имеет значения.)

[voraa]

Можно и короче

const ids = ['buttonA', 'buttonA1',... 'ccontent5'];
ids.forEach(name => window[name] = document.querySelector('#'+name))

Но я не сторонник загаживания глобальных объектов

[voraa]

все id автоматически мапятся в глобальные переменные

Ну не все. Существующие свойства не перезаписываются.

<div id="alert">оппа</div>
<script>alert(alert.textContent)</script>

[WebMachine]

<div id="textId">оппа</div>
<script>alert(textId.textContent)</script>

Оочень благодарен) довольно полезно. Спасибо

[WebMachine]

Можно и короче

Очень благодарен. Спасибо.
Подскажите - это решение гадит?

const ids = ['buttonA', 'buttonA1',... 'ccontent5'];
ids.forEach(name => window[name] = document.querySelector('#'+name))

после этого переменные будут глобальными?