にしし ふぁくとりー:西村文宏 個人サイト

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

ページ内の総リンク個数を得てリンク一覧を出す方法 [情報取得]

ページ(HTML)内に含まれるリンク総数を得るには、document.links.lengthの値を調べます。ページ内のすべてのリンクを順番に得たい場合は、document.links[添字]の書式を使ってfor文などでループさせれば良いでしょう。この方法を使えば、ページ内のリンク先一覧を出すのも簡単です。

HTML内に含まれるリンク総数を得る方法

HTML内に存在するすべてのリンクは、document.linksで得られます。そのウェブページ内に存在するすべてのリンクが配列として得られるので、この長さ(length)を見れば、そのページ内に存在するリンクの合計個数が分かります。
JavaScriptソースは以下のような感じです。

var linknum = document.links.length;

これで変数linknumに、ページ内のリンク総数が数値で入ります。
例えば、リンクの総数をダイアログに表示したければ(※そんな必要性はないでしょうが^^;)、以下のように記述できます。

alert( document.links.length + '個のリンクがあります。' );

このスクリプトがボタンのonclickで実行されるように記述すると、以下のように見えます。

ページ内に存在するリンクの総数を得るだけで終わり……ということはまずないですよね。^^;
総数を得たからには、当然、ループを使ってリンク1つ1つに対して何らかの処理をするでしょう。

ページ内のリンク一覧を表示する方法

ページ内に存在するリンクについて、そのリンク先(href属性値)の一覧を表示するには、for文でループを作って以下のように記述すると実現できます。

JavaScriptソース

function GetAllLinks() {
   var linkNum = document.links.length;  // リンクの総数を得る
   var outputLinks = "リンク一覧:\n";   // 出力用の変数

   // すべてのリンク先を得るループ
   for( var i=0 ; i < linkNum ; i++ ) {
      outputLinks += '《' + (i+1) + '番目》' + document.links[i].href + '\n';
   }

   outputLinks += "以上です。";
   alert( outputLinks );
}

ページ内に存在するリンク1つ1つは、document.links[添字]で参照できます。添字は0から始まりますから、document.links.lengthの値が「10」だったとすれば、0~9までループさせればすべてのリンクに対して何らかの処理ができます。
上記のソースで何番目なのかを表示する際に(i+1) + '番目'のように記述しているのは、添え字が0から始まるためです。

それぞれのリンクに指定されているリンク先(=href属性値)は、document.links[添字].hrefで得られます。なので、これを集めればリンク一覧が作れます。
簡単ですね!

上記のスクリプトをボタンクリックで実行されるようにしてみると、以下の通りです。

上記のボタンを押すと、たぶん60行以上の長いアラートボックスが表示されますので注意して下さい。^^;
もし、アラートボックスを閉じる[OK]ボタンが押せない場合は、[Enter]キーか[Space]キーで押せると思います。
Firefoxでは、以下のような感じのアラートボックスが表示されて、リンク先一覧がずらっと並びます。

リンク先一覧を表示するアラートボックス

実際に役に立つリンク一覧機能を作るためには、

  • 重複するリンク先を統合したり、
  • リンク先の記述が相対パスの場合にはドメイン名を加えたり、
  • リンク先URLのドメイン別や階層の浅い順などに並べ替えたり、

……のように、もうちょっと工夫した方が良いとは思いますが。(^_^;)
その辺の話は別の機会にしたいと思います。^^;

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---