【JS】HTML上に存在するIMG要素を全て取得し、src属性が重複するものを削除したオブジェクトを取得したい。

前提・実現したいこと

HTMLのIMG要素（重複した画像を除く）を取得したいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>Document</title>
8</head>
9<body>
10
11	<ul>
12		<li><img src="a1.jpg" alt="" width="14"></li>
13		<li><img src="a2.jpg" alt="" width="640"></li>
14		<li><img src="a1.jpg" alt="" width="24"></li>
15		<li><img src="a4.jpg" alt="" width="545"></li>
16		<li><img src="a7.jpg" alt="" width="11"></li>
17		<li><img src="a4.jpg" alt="" width="14"></li>
18	</ul>
19
20	<script type="text/javascript">
21		var img = document.getElementsByTagName('img');
22
23		// ここで重複したsrcを削除した配列を取得したい
24		// img =
25
26		for(var i=0; i<img.length; i++) {
27			console.log(img[i]);
28			/*
29			 現時点での出力は
30			 - a1.jpg
31			 - a2.jpg
32			 - a1.jpg
33			 - a4.jpg
34			 - a7.jpg
35			 - a4.jpg
36			 のオブジェクト
37
38			 取得したいものは
39			 - a1.jpg
40			 - a2.jpg
41			 - a4.jpg
42			 - a7.jpg
43			 のオブジェクト
44			*/
45		}
46	</script>
47</body>
48</html>
49

試したこと

https://qiita.com/cocottejs/items/7afe6d5f27ee7c36c61f
上記URLのように配列から重複を削除する方法は見つけることができたのですが、
配列に格納したオブジェクト（IMG）のプロパティ（SRC）が重複する
ものを削除した配列を取得する方法を見つけられませんでした。

初心者ですので、的外れなことを書いていると思いますが、
よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

JavaScript
1var b = Object.values( Array.from( document.body.querySelectorAll( 'img' ) ).reduce( function ( pre, curr ) {
2	if ( !pre[ curr.src ] ) pre[ curr.src ] = curr;
3	return pre;
4}, {} ) );
5console.log( b );
6```**動くサンプル：**[https://jsfiddle.net/7kd8ucca/](https://jsfiddle.net/7kd8ucca/)
7
8---
9
10【Object.values() - JavaScript | MDN】
11[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
12
13【Array.from() - JavaScript | MDN】
14[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
15
16【Array.prototype.reduce() - JavaScript | MDN】
17[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

投稿2018/02/21 17:36

kei344

総合スコア69608

root_jp

2018/02/22 01:49

Array.fromなんていう便利なものがあるんですね。これがあれば、ようやく Array.prototype.forEach.call のようなこともしなくてすむってことですね。勉強になります。

miyabi_pudding

2018/02/22 09:25

こんな便利な関数があるとは・・・。

zak

2018/02/22 14:33

やりたいことを簡単に実現することができました！ありがとうございます！

行動規範の内容に同意します

確認ですが、ほしいものは、[img1, img2, ...]ではなくて、[src1, src2, ...]ですね。

html
1<!doctype html>
2<meta charset="utf-8">
3
4<ul>
5  <li><img src="a1.jpg" alt="" width="14"></li>
6  <li><img src="a2.jpg" alt="" width="640"></li>
7  <li><img src="a1.jpg" alt="" width="24"></li>
8  <li><img src="a4.jpg" alt="" width="545"></li>
9  <li><img src="a7.jpg" alt="" width="11"></li>
10  <li><img src="a4.jpg" alt="" width="14"></li>
11</ul>
12
13<script>
14  var images = document.querySelectorAll('img');
15  var result = [];
16  // imagesがimgのリストになっているので、それぞれsrcを確認します
17  var i;
18  var src;
19  for (i = 0; i < images.length; i++) {
20    src = images[i].getAttribute('src');
21    // resultの中にsrcがない場合、indexOfは-1になります
22    if (result.indexOf(src) < 0) {
23      result.push(src);
24    }
25  }
26  console.log(result);
27</script>

resultが重複のないsrcのArrayになっています。ご確認ください。

投稿2018/02/22 01:36

退会済みユーザー

総合スコア0

zak

2018/02/22 14:38

私の質問が分かりにくくて申し訳ありません。 src属性だけでなく、widthやouterHTML等の様々なプロパティが欲しかったためオブジェクトの配列を取得しようとしておりました。ただ、非常に勉強になりました。ありがとうございます！

行動規範の内容に同意します

オブジェクトの取得ではなく削除が目的ならこんなながれでしょう

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var imgs=document.getElementsByTagName('img');
3  for(var i =0;i<imgs.length-1;i++){
4    for(var j=imgs.length-1;j>i;j--){
5      if(imgs[i].src==imgs[j].src){
6        imgs[j].parentNode.parentNode.removeChild(imgs[j].parentNode);
7      }
8    }
9  }
10  console.log(imgs.length);
11});