document.getElementsByTagName ('img'), как получить только PNG изображения?

Question

Я пытаюсь получить только изображения с атрибутом png от dom, кто-нибудь знает, как это сделать?

Answer 1

Нет безопасного способа сделать это.Браузер нигде не показывает, какой тип изображения был загружен.Более того, вы даже не можете гарантировать, что URL-адрес изображения будет иметь правильное расширение файла, потому что http://example.com/some/image является вполне допустимым URL-адресом.

Вы можете получить приближение, используя CSS-селектор «атрибут содержит» с помощью querySelectorAll с браузерами, которые его поддерживают:

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

Это находит все img элементов с .png где-то в их атрибуте src.Обратите внимание, что это уязвимо как для ложных срабатываний, так и для ложных отрицаний.

Этот метод не будет работать в IE 7 или ниже.

Answer 2

Чтобы выполнить итерации по изображениям и вернуть их со свойством src , заканчивающимся на .png:

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):

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 в массив, который представляет собой еще пару строк кода.