2014年4月 6日 10:05

【JavaScriptの練習】idもclassも指定されていない要素を指定するには?

pixiv 5th Anniversary Book

躓いた! idもclassもついてねーよ!!

ブックマークレットを色々作って練習中のJavaScript。お蔵入りにしたんですけど、Pixivの画像紹介ブックマークレットを作ってみました。

たまに画像拾えないのと、正規版があるのでお蔵入りさせました。これ作る時に躓いたのが「idもclassも指定されていないimg要素を拾う方法」。

javaScriptでmeta内のproperty属性から画像を取得する方法でも出来るんですが、あえて「idもclassも指定されていないimg要素を拾う方法」を探しました。

スポンサードリンク

innerHTMLとsplitがポイント

結論から書くと、idもclassも指定されていないimg要素の親要素で最初にid又はclassを持つ要素を指定し、その中身をinnerHTMLで取得。

次に、不要な部分を削るためにsplitで分解して指定という方法でやりました。

ちなみにコレ、jQueryだとめっちゃ簡単にできるみたい? まだちゃんと勉強してないんで分からんけど。

Pixivの投稿画像周辺のHTMLはこんな感じ。

<div class="works_display">
<a href="member_illust.php?mode=big&illust_id=37330106" target="_blank"><img src="http://i2.pixiv.net/img116/img/beni2/37330106_m.jpg" alt="名取ちゃん出撃です!" title="名取ちゃん出撃です!" border="0"></a>
</div>

なので、ブックマークレットの関数はこんな。

function pixiv() {var element =document.getElementsByClassName('works_display')[0].innerHTML.split(">")[1];return element;}var img = pixiv();

多分すげー強引なやり方なんだと思うし、もっとスマートな方法がありそうですけど、とりあえずこれでも出来ました!

あかめ@akamiru_後記

やたら時間掛かったのにお蔵入りにしちゃったので、コード書く練習が嫌になりそうだった(w

  • 【タグ】
プログラミングカテゴリの他の記事はこちら。
JavaScriptカテゴリの他の記事はこちら。

スポンサードリンク

news

新作同人誌! MEMORIE(あまんちゅ!イラスト本)の通販 → メロンブックス

イラスト・漫画など活動報告 → イラスト・漫画仕事および同人活動の記録| 絶版あかみる