Question

我试图只从dom获取带有png属性的图像，有人知道怎么做吗？

Answer 1

没有安全的方法可以做到这一点。浏览器不会在任何地方显示已加载的图像类型。此外，您甚至无法保证图片网址具有正确的文件扩展名，因为http://example.com/some/image是一个非常有效的网址。

您可以使用带有querySelectorAll的“属性包含”CSS选择器和支持它的浏览器来获得近似值：

var pngs = document.querySelectorAll('img[src*=".png"]');

在img属性的某处找到.png个src个元素。请注意，这容易受到误报和漏报的影响。

此方法在IE 7或更低版本中无效。

Answer 2

迭代图像并返回带有以<。png结尾的 src 属性的图像：

var images = document.images;
var pngs = [];
for (var i=0, iLen=images.length; i<iLen; i++){
  if (/\.png$/i.test(images[i].src))
    pngs.push(images[i]);
}

pngs 是一组图像，其 src 以.png结尾，几乎可以在所有支持脚本的浏览器中使用。

如果你想要一些使用querySelectorAll的东西（如果可用的话）和一个简单的循环图像，如果没有，那么以下内容应该适合（每个lonesomeday的ansewr）：

function getPngs() {

  if (document.querySelectorAll) {
    return document.querySelectorAll('img[src*=".png"]');
  }

  var images = document.images;
  var pngs = [];
  var re = /\.png$/i; 
  for (var i=0, iLen=images.length; i<iLen; i++){
    if (re.test(images[i].src)) {
      pngs.push(images[i]);
    }
  }
  return pngs;
}

你可能会得到一个NodeList或一个数组，但是如果你想要做的就是遍历它，那就没关系。否则你需要将qSA fork的结果转换为一个数组，这是几行代码。

document.getElementsByTagName（'img'），如何只获取png图像？

2 个答案: