JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでWebページ上のすべてのリンクを取得してコンソールに出力する方法

この記事では、任意のWebサイトからすべてのリンクを取得し、コンソールに出力する方法を解説します。

JavaScriptでWebページ上のすべてのリンクを取得してコンソールに出力する方法

コード

var links = document.querySelectorAll("a");

for (var i = 0; i < links.length; i++) {
  var link = links[i].getAttribute("href");
  console.log(link);
}

使い方

このコードを使うには、対象のWebページを開いた状態でブラウザの開発者ツール(デベロッパーツール)を起動し、「Console(コンソール)」タブにコードを貼り付けて実行するだけです。Windowsなら「F12」キー、Macなら「Cmd + Option + I」で開けます。

実行すると、そのページ上に存在するすべてのアンカー要素(<a>)の href 属性、つまりリンク先のURLが1行ずつコンソールに出力されます。

特定の範囲からだけリンクを取得する方法

ヒント: Webページ全体ではなく、たとえば記事のコンテナ要素からだけリンクを取得したい場合は、セレクタをより具体的に指定しましょう。例えば、リンクを取得したい記事に .article というクラスが付いている場合、次のように書けます。

var articleLinks = document.querySelectorAll(".article a");

このコードはより限定的な指定になっています。.article クラスを持つ親要素の内側にあるアンカー要素(a)からのみ、リンクを取得します。

  1. JavaScriptで要素が非表示になっているかどうかを確認する方法

    Webページの開発では、特定の要素が現在非表示になっているかどうか（display: none が適用されているか）を判定したい場面がよくあります。JavaScriptでこれを実現するには、window.getComputedStyle() メソッドを使うのが一般的です。このメソッドは、CSSスタイルシートで設定された実際の表示状態を取得できるため、確実に非表示状態をチェックできます。 実装例 以下は、ボタンをクリックすると非表示になっているDIV要素を表示するサンプルコードです。クリック時には、まず getComputedStyle() で要素が「none」になっているかどうかを確認してから

  2. JavaScript（D3.js）を使ってWebページのpタグに配列のすべての値を表示する方法

    配列のすべての値をpタグで表示する方法JavaScriptで配列のすべての値をWebページ上のpタグとして表示したい場合は、D3.jsの .data(anyArrayObject) メソッドを利用するのが便利です。D3.jsはデータとDOM要素を結びつける（データバインディング）ためのライブラリで、data() で配列を渡し、enter() で要素を追加することで、配列の要素数に応じたpタグを自動的に生成できます。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta chars