如何在香草js中定位一个div中的对象答案

【问题标题】：How to target an object in a div in vanilla js如何在香草js中定位一个div中的对象
【发布时间】：2019-01-17 20:06:46
【问题描述】：

我正在尝试将一段数据放入 javascript 变量中，但我不知道如何定位它。数据位于作为 div 一部分的对象中。这是它在 html 页面中的外观

我已经突出显示了我要定位的项目。

这是我正在尝试的（但失败了）：

let dataDiv = document.querySelector(" .bc-product-form__options  > div : data-variants");
console.log( dataDiv : data-variants);

如何将该对象放入 js 变量中？

【问题讨论】：

在这里发布html和json
复制粘贴该登录您的问题。（不要使用仅图像。）
你必须使用querySelector().dataset.variants:data-variants 的选择器是jQuery 的丑陋部分。您正在将香草与 jQ 混合。试试这些：let dataDiv = document.querySelector(".bc-product-form__options > div[data-variants]");
这工作：jsfiddle.net/khrismuc/csk2p6m5

标签： javascript html object

【解决方案1】：

您可以通过适当的属性选择 div（在这种情况下，您需要data-js="product-variants-object"，然后使用getAttribute 和JSON.parse 来检索和解析数据。

let div = document.querySelector('div[data-js="product-variants-object"]');
let data = JSON.parse(div.getAttribute('data-variants'));
console.log(data);

&lt;div data-js="product-variants-object" data-variants='[{"key": "value"}]'&gt;&lt;/div&gt;

【讨论】：

P.S：@Kal - 如果需要，在您更改/修改 data 之后，要重建，您只需执行 div.setAttribute('data-variants', JSON.stringify(data)) ：D