在 DOM 的属性中选择对象属性

【问题标题】：Select an object property within an attribute of the DOM在 DOM 的属性中选择对象属性
【发布时间】：2020-06-16 12:35:44
【问题描述】：

我查看了这个帖子，但没有帮助：Find an element in DOM based on an attribute value

我需要一个 Vanilla JS 解决方案来选择位于 DOM 中 <a> 标记的自定义属性中的用户名。我使用了const users = document.querySelectorAll('a[metadata]')，它返回所有<a> 标签及其所有属性的NodeList。如果我输入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"]');，但只是返回未定义。我认为我的问题是用户名在一个对象中，我不知道如何选择它。

提前致谢

【问题讨论】：

标签： javascript html object attributes

【解决方案1】：

首先，请注意document.querySelectorAll 返回与给定查询匹配的元素列表，而不是您在查询中指定的那些元素的属性值列表。

从const users = document.querySelectorAll('a[metadata]')，你可以得到metadata属性，比如说，第一个元素，像这样：

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

然后，因为它是一个 JSON 字符串，所以你解析它：

const user0 = JSON.parse(metadata0);

现在您可以像使用常规 JavaScript 对象一样使用 user0：

user0.username
// johnny134

附：元数据属性中的 JSON 无效，尝试解析时可能会出错。在 JSON 中使用双引号，而不是单引号。

【讨论】：

感谢您的回答 - getElement 和 getAttribute 的分离，以及 JSON 的解析是正确的。它对我有用。