Выберите свойство объекта в атрибуте DOM

Question

Я просмотрел эту ветку, но это не помогло: Найти элемент в DOM на основе значения атрибута

Мне нужно решение Vanilla JS для выбора имени пользователя, которое находится в настраиваемом атрибуте тега <a> в модели DOM. Я использовал const users = document.querySelectorAll('a[metadata]'), который возвращает NodeList всех тегов <a> со всеми их атрибутами. Если я наберу console.log(users[0]), я получу:

<a href="#" class="btn-normal" metadata="
{
'username':'johnny134',
'category':'shoes',
'summary':'Just a guy called Johnny',
'userId':1223432432
}"
</a>

Чтобы получить доступ к имени пользователя, я пробовал const usernames = document.querySelectorAll('a[metadata="username"]');, но просто вернулся undefined. Я думаю, моя проблема в том, что имя пользователя находится в объекте, и я не могу понять, как его выбрать.

Заранее спасибо

Answer 1

Во-первых, обратите внимание, что document.querySelectorAll возвращает список элементов , которые соответствуют заданному запросу, а не список значений атрибутов тех элементов, которые вы указываете в запросе.

Из const users = document.querySelectorAll('a[metadata]') вы можете получить атрибут metadata, скажем, первого элемента, например:

const metadata0 = users[0].getAttribute("metadata");

И затем, поскольку это строка JSON, вы анализируете ее:

const user0 = JSON.parse(metadata0);

Теперь вы можете использовать user0 как обычный JavaScript объект:

user0.username
// johnny134

---

PS JSON в атрибуте метаданных недействителен, и вы может получить ошибку при попытке его разобрать. Используйте двойные кавычки в JSON, а не одинарные.