如何在JavaScript中获取data-global-messages属性内的JSON字段？

你有一个包含data-global-messages属性的div元素，代码如下：

<div
    data-global-messages="{&quot;addCartSuccessMessage&quot;:&quot;successfully added&quot;,&quot;creditRepresentativeMessage&quot;:&quot;Please contact your Credit Representative&quot;,&quot;nonStockMessage&quot;:&quot;Non-stock item&quot;,&quot;addWishlistSuccessMessage&quot;:&quot;Wish List.&quot;,&quot;itemExistsCartMessage&quot;:&quot;Please review error(s) below.&nbsp;&quot;,&quot;itemExistsWishlistMessage&quot;:&quot;Please review error(s) below.&nbsp;&quot;,&quot;nonAvailableMessage&quot;:&quot;substitute.&quot;,&quot;creditDepartmentMessage&quot;:&quot;Please contact Sea.&nbsp;&quot;}">
  </div>

你尝试执行document.querySelector('data-global-messages').getAttribute('addCartSuccessMessage')后返回null，想知道正确的实现方法。

正确实现方法 #

步骤拆解： #

• 选对元素：用CSS属性选择器[data-global-messages]定位目标div，而不是直接把属性名当标签名使用。
• 获取完整JSON字符串：通过getAttribute('data-global-messages')拿到属性里的整个转义JSON内容。
• 转换为JS对象：用JSON.parse()把转义后的JSON字符串解析成可直接操作的JavaScript对象。
• 提取目标字段：从解析后的对象中直接访问需要的字段，比如addCartSuccessMessage。

完整代码示例： #

// 定位目标div元素
const msgDiv = document.querySelector('[data-global-messages]');
// 获取属性内的JSON字符串
const msgJsonStr = msgDiv.getAttribute('data-global-messages');
// 解析JSON为JS对象
const msgObj = JSON.parse(msgJsonStr);
// 获取指定字段的内容
const successMsg = msgObj.addCartSuccessMessage;
console.log(successMsg); // 输出：successfully added

你的代码出错原因： #

1. 选择器错误：document.querySelector('data-global-messages')是在查找标签名为<data-global-messages>的元素，根本不是你要的div，所以返回null。
2. 逻辑错误：addCartSuccessMessage是属性值内部JSON的字段，不是div元素本身的属性，不能直接用getAttribute获取。

内容的提问来源于stack exchange，提问作者kittu