JS遍历HTML列表问题：如何为每个列表项内按钮添加对应链接数据属性

问题场景 #

需要遍历所有.productgrid--item列表项，将每个列表项内.productitem--image-link标签的href值，设置为同列表项内.atc-button--text按钮的data属性。但现有代码仅对第一个列表项生效，无法作用于全部项。

错误原因 #

现有代码中使用的document.querySelector()是从整个文档范围内查找匹配元素，每次都会返回第一个符合选择器的a标签和按钮，导致所有按钮都被设置为第一个a标签的href值，而非当前遍历的列表项内的对应元素。

修正后的代码 #

只需将元素查找范围限定在当前遍历的列表项节点内，用node.querySelector()替代document.querySelector()即可：

document.querySelectorAll('.productgrid--item').forEach(function(node) {
  var anchorHref = node.querySelector('.productitem--image-link').getAttribute('href');
  var addToCart = node.querySelector('.atc-button--text');
  addToCart.setAttribute('data', anchorHref);
});

规范写法补充 #

如果需要设置符合HTML5标准的自定义data属性（例如data-product-url），更推荐使用dataset属性：

addToCart.dataset.productUrl = anchorHref;

这样最终按钮上会生成data-product-url="xxx"的属性，更符合规范且便于后续JavaScript读取。

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