質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3960閲覧

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

zak

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/02/21 17:16

前提・実現したいこと

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)が重複する
ものを削除した配列を取得する方法を見つけられませんでした。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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 10Object.values() - JavaScript | MDN11[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 13Array.from() - JavaScript | MDN14[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 | MDN17[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

総合スコア69596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2018/02/22 01:49

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

2018/02/22 09:25

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

2018/02/22 14:33

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

0

確認ですが、ほしいものは、[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等の様々なプロパティが欲しかったため オブジェクトの配列を取得しようとしておりました。 ただ、非常に勉強になりました。 ありがとうございます!
guest

0

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

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});

IEを無視していいならclosestが利用できるのですけどね

投稿2018/02/22 02:01

yambejp

総合スコア116644

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zak

2018/02/22 14:41

HTML上から重複した属性を持つ要素を削除するにはこのようにすればいいのですね。 非常に勉強になりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問