WebサイトのClassやIDから中身や要素を取得する+ブックマークレット作成

GoogleChrome ロゴ

Webサイトの中身から「ある要素」を取得し、その中身を取得する方法です。

今回はそれをブックマークレットにして実行する方法も含めてご紹介します。

対象クラスがある要素の中身を取得する
ブックマークレットに設定する
HTMLのsrc要素にあるURL取得し新しいタブで開く
参考
あとがき

対象クラスがある要素の中身を取得する

対象がclassの場合

このようなコードで中身取得できます。

// <div class="HoHoHoi">aaa</div> に対して
javascript:(
  function(){
    var elements = document.getElementsByClassName("HoHoHoi");
    alert(elements[0].innerHTML);
  }
)();

対象がIDの場合

classでなくIDから取る場合は

// <div id="HoHoHoi">aaa</div> に対して
var elements = document.getElementById("HoHoHoi");
alert(elements.innerHTML);

に変更すればいけます。

対象がHTMLタグの場合

HTMLタグから取得する場合はコチラ。

// <div>aaa</div> に対して
var elements = document.getElementsByTagName("div");
alert(elements[0].innerHTML);

結果

取得した結果は、こうなります。

ソース: <p class=“HoHoHoi”>世界の平和を祈ってる</p>
結　果: 世界の平和を祈ってる

ブックマークレットに設定する

最初に出していたソースを1行にします。

javascript:(function(){var elements = document.getElementsByClassName("HoHoHoi");alert(elements[0].innerHTML);})();

で、Chromeのブックマークバーを「右クリック→ぺーじを追加」を選択。

ページを追加

任意の名前を設定して、1行にしたソースを「URL」に入力します。

ブックマークレットの追加

で、「保存ボタン」で保存。

あとは発動させたいタイミングで、ブックマークレットを押せばOK！

HTMLのsrc要素にあるURL取得し新しいタブで開く

ぼくはこれがやりたくて、今回ブックマークレットに手を出したのですが、実現できたのでソースを。

ブックマークレットに設定するjavascriptはコチラ。

javascript:(function(){var elements = document.getElementsByTagName("tag");console.log("1: " + elements[0].src);window.open(elements[0].src, '_blank');})();

ちなみに見やすくした形です。

javascript:(
  function(){
    var elements = document.getElementsByTagName("tag");
    console.log("1: " + elements[0].src);
    window.open(elements[0].src, '_blank');
  }
)();

サンプルベースですが、"tag"というHTMLタグを、「getElementsByTagName」で取得します。

取得した要素から「src」を取り出し、「window.open」で開いています。

console.logは、ムダにログ出力しております。

参考

参考にしたサイト様です。

あとがき

ちなみにサンプルにあったHTMLは遠藤章造です。

lisz-works

プログラミングと興味を貴方に