使用queryselectorall和类

Question

我在一个大型html文件中有一行<div class="price-box price-final_price" data-role="priceBox" data-product-id="176">。

我需要将product-id的值存储在变量中，以便我可以全局访问它。

我想用

来做

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].data-product-id;

但它不起作用。我做错了什么？

Answer 1

如果您想使用纯JavaScript，可以使用.getAttribute()方法

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].getAttribute('data-product-id');

如果你想使用jquery，你可以这样做

var var_productid = $('div[data-role="priceBox"]').eq(0).attr('data-product-id');

Answer 2

如果您打算在javascript中使用和检索data_attributes，则需要使用dataset而不是仅使用数据。另外要获得product-id，您需要使用驼峰案例

＆＃13;

＆＃13;

var var_productid = document.querySelectorAll('div[data-role="priceBox"]')[0].dataset.productId;
console.log(var_productid)

＆＃13;

<div class="price-box price-final_price" data-role="priceBox" data-product-id="176"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

var productId = $("div[data-role='priceBox']").attr('data-product-id');

Answer 4

dataProductId = document.querySelectorAll("div")[0].getAttribute("data-roduct-id");

Answer 5

• 使用getAttribute
• 如果您只想找到第一个项目，则无需使用querySelectorAll，只需使用querySelector

段：

var productid = document.querySelector('div[data-role="priceBox"]').getAttribute('data-product-id');