如何从Nike商品页面提取可用鞋码的data-tamanho属性值列表？

我尝试从Nike的Nike Daybreak鞋款页面提取可用鞋码列表。所有鞋码（含可用与不可用）均位于<li>标签中，在控制台调用document.getElementsByClassName('tamanho__item_pdp js-tamanho__item_pdp')会返回包含所有可用鞋码的HTMLCollection，每个元素为<input type="radio" class="tamanho__item_pdp js-tamanho__item_pdp" data-tamanho="36" data-codigoproduto="194495234016" name="tamanho__id" id="tamanho__id36" value="https://www.nike.com.br/Snkrs/Produto/Daybreak/153-169-211-222753">。请问如何仅提取作为鞋码编号的data-tamanho属性值，并生成所有可用鞋码的列表？

没问题，我来帮你搞定这个需求！下面是几种简单直接的原生JavaScript方案，都可以直接在浏览器控制台里运行：

方案1：用Array.from()+map快速转换提取 #

HTMLCollection本身不是数组，但我们可以用Array.from()把它转成数组，再用map方法批量提取data-tamanho属性：

// 获取所有可用鞋码的DOM元素集合
const sizeElements = document.getElementsByClassName('tamanho__item_pdp js-tamanho__item_pdp');
// 转换为数组并提取鞋码值
const availableSizes = Array.from(sizeElements).map(element => element.dataset.tamanho);
// 打印结果
console.log(availableSizes);

这里用element.dataset.tamanho是HTML5标准的data属性获取方式，比getAttribute('data-tamanho')更简洁直观。

方案2：兼容旧浏览器的for循环写法 #

如果需要适配不支持ES6语法的旧浏览器，可以用传统的for循环来遍历集合：

const sizeElements = document.getElementsByClassName('tamanho__item_pdp js-tamanho__item_pdp');
const availableSizes = [];
// 逐个遍历元素提取鞋码
for (let i = 0; i < sizeElements.length; i++) {
  const size = sizeElements[i].getAttribute('data-tamanho');
  availableSizes.push(size);
}
console.log(availableSizes);

方案3：扩展运算符（...）简化转换 #

另一种把HTMLCollection转成数组的方式是用ES6的扩展运算符，写法更简洁：

const sizeElements = document.getElementsByClassName('tamanho__item_pdp js-tamanho__item_pdp');
const availableSizes = [...sizeElements].map(el => el.dataset.tamanho);
console.log(availableSizes);

额外小技巧 #

如果需要把鞋码从字符串转为数字类型（比如后续要做排序或计算），只需要在map里加个Number()转换：

const availableSizes = [...sizeElements].map(el => Number(el.dataset.tamanho));

执行完上面的代码后，你就会得到一个包含所有可用鞋码的数组，比如["36", "37", "38"]或者[36, 37, 38]（取决于是否转换类型）。

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