如何在vanilla js中定位div中的对象

Question

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

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

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

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

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

Answer 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);

 <div data-js="product-variants-object" data-variants='[{"key": "value"}]'></div>