Предисловие Ссылка на заголовок

Всем доброго времени суток, извиняюсь ща столь долгое отсутствие. Сегодня один из моих знакомых-ReactUser-ов задал мне вопрос про настройки аттрибутов DOM, об этом и поговорим.

Вопрос: Ссылка на заголовок

Ты утвеждаешь что можно просто настроить аттрибуты в объекте и не париться, а обходить их через forEach, но как ты настроишь, к примеру 'aria-label', ведь дефис в имени объекта нельзя использовать?

Ответ: Ссылка на заголовок

Для того чтобы зараннее прояснить, что из себя представляют все объекты в JavaScript(в том числе и статические классы), приведу следующий код:

class A {
    static 'статичное-поле+класа~A!?' = 'Это публичное статическое поле класса A';
    static #private = 'Это приватное статическое поле класса A';
};

Object.keys(A).forEach(k => {
    console.log(`${k}: '${A[k]}'`);
});

В консоли мы увидим следующее:

статичное-поле+класа~A!?: 'Это публичное статическое поле класса A'

Как мы видим - класс Object спокойно обходит статический класс, ибо для него это такойже объект как и любой инстанс Object, но, есть маленький нюанс: он обходит только перечисляемые(публичные) поля. Вот собственно и всё.

Вывод: Ссылка на заголовок

Если заключать название полей в кавычки вы можете использовать любые печатные символы, даже экранированные кавычки, это типичное поведение для скриптовых языков. Таким образом, настройка аттрибутов HTML-тегов сводится к созданю объекта и дальнейшему применению через setAttribute(k, obj[k]).

Всем спасибо, надеюсь что данный пост будет Вам полезен. Любви и обнимашек!