如何使用JavaScript获取所有img元素的data-uuid属性？

没问题，我来给你两种实用的方案，不管页面里是只有1个还是多个带data-uuid的<img>元素，都能轻松获取到对应的属性值：

方案一：原生JavaScript（无需依赖库） #

原生JS的方案更轻量化，不需要引入额外库，逻辑也很清晰：

// 1. 获取所有带有data-uuid属性的img元素
const imgElements = document.querySelectorAll('img[data-uuid]');

// 2. 将NodeList转换为数组，并提取每个元素的data-uuid值
const uuidList = Array.from(imgElements).map(img => {
  // 两种获取方式可选：dataset API更简洁，getAttribute兼容更旧浏览器
  return img.dataset.uuid; 
  // 或者 return img.getAttribute('data-uuid');
});

// 处理单个元素的场景（可选）
if (imgElements.length === 1) {
  const singleUuid = imgElements[0].dataset.uuid;
  console.log('单个图片的UUID:', singleUuid);
}

// 输出所有UUID
console.log('所有图片的UUID列表:', uuidList);

说明：querySelectorAll('img[data-uuid]')会精准匹配所有带有data-uuid属性的<img>元素，返回的NodeList可以通过Array.from()转为数组，方便使用数组方法处理；不管元素数量是1还是N，这段代码都能正常工作。

方案二：jQuery方案（适合已引入jQuery的项目） #

如果你的项目已经在用jQuery，那可以用更简洁的写法：

// 1. 获取所有带data-uuid的img元素，提取属性值并转为普通数组
const uuidList = $('img[data-uuid]').map(function() {
  // 两种获取方式可选：data()会自动转换数据类型，attr()返回原始字符串
  return $(this).data('uuid');
  // 或者 return $(this).attr('data-uuid');
}).get();

// 处理单个元素的场景（可选）
if ($('img[data-uuid]').length === 1) {
  const singleUuid = $('img[data-uuid]').data('uuid');
  console.log('单个图片的UUID:', singleUuid);
}

// 输出所有UUID
console.log('所有图片的UUID列表:', uuidList);

说明：jQuery的map()方法会遍历匹配到的元素，get()方法把jQuery对象转为普通数组；同样兼容单个和多个元素的场景，和原生方案效果一致。

不管你用哪种方案，都能完美适配你提供的foo页面（多个img元素）和bar页面（单个img元素）的场景。

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