SNSボタンの設置や、飛び先のページにHTMLの情報を渡したいとき、いちいちパラメーターに渡す値を定義しなくてもJavascriptを使えば簡単に値を渡すことができるようになります。

そんなJavascript、そもそもどんなHTMLの値を取得できるか調べてみましたのでご紹介します。

タイトルタグの取得

document.title;

一番良く使うのがタイトルタグの取得。シェアボタンなどのリンクのパラメーターに設置すれば、簡単に各ページごとに合わせたボタンを作ることができます。

各SNSボタンでの使い方は以下のページをご参考下さい。

URLの取得

location.href;

上記のSNSボタン設置でも利用していますが、Javascriptで現在のURLの取得もすることができます。

ページごとにURLをいちいち定義するなんて面倒くさい。Javascriptで一発解決ですね。

metaデスクリプションの取得

document.getElementsByName('description').item(0).content;

ページのデスクリプションを取得したい場合は、こんな方法で取得可能です。説明文が欲しい場合に役立ちます。

metaキーワードの取得

document.getElementsByName('keywords').item(0).content;

どんな場面で使うか分かりませんが、こんな方法でキーワードも取得できます。

その他、要素取得方法

// IDを指定して取得する
document.getElementById('ID名');

// タグを指定して取得する
document.getElementsByTagName('タグ名');

// クラスを指定して取得する
document.getElementsByClassName('クラス名');

// name属性を指定して取得する
document.getElementsByName('name属性');

// カスタムデータ属性から取得する
document.querySelectorAll('[データ属性]');

その他上記の方法で指定のタグ情報の取得が可能です。要素を取得した後の指定の場所の取得は、細かくなりますので省略します。

まとめ

Javascriptを使えば、HTMLで書いた大抵のソースは取得可能です。ぜひご参考下さい。