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

JavaScriptでドキュメント内の特定のアンカー要素を取得・表示する方法

JavaScriptでは、ドキュメント内のアンカータグ（<a>タグ）が配列のような（array-like）構造として管理されています。特定のアンカー要素を取得して表示したい場合は、document.anchorsコレクションにインデックス番号を指定し、innerHTMLプロパティを組み合わせます。これは、配列から特定の要素を取り出すときとまったく同じ考え方です。

構文

element = document.anchors[i].innerHTML;

例1：最初のアンカー要素を表示する

次の例では、ページ内にある2つのアンカータグのうち、最初のアンカー要素のテキストを表示しています。インデックスは0から始まるため、[0]を指定すると最初の要素が取得できます。

<html>
<body>
<a name="Tutor">Tutorix</a><br>
<a name="Tutorial">Tutorialspoint</a><br>
<p id="anchors"></p>
<script>
    document.getElementById("anchors").innerHTML =
    "最初のアンカー要素は: " + document.anchors[0].innerHTML;
</script>
</body>
</html>

出力結果

最初のアンカー要素は: Tutorix

例2：3番目のアンカー要素を表示する

次の例では、ページ内に3つのアンカー要素が存在し、その中から3番目の要素（インデックス[2]）のテキストを表示しています。

<html>
<body>
    <a name="Tutor">Tutorix</a><br>
    <a name="Tutorial">Tutorialspoint</a><br>
    <a name="Tutorials">Tutorialspoint private ltd</a><br>
<p id="anchors"></p>
<script>
    document.getElementById("anchors").innerHTML =
    "3番目の要素は: " + document.anchors[2].innerHTML;
</script>
</body>
</html>

出力結果

3番目の要素は: Tutorialspoint private ltd

補足：モダンなJavaScriptでの代替手段

document.anchorsはname属性を持つ<a>タグのみを対象とする古いAPIで、現在のHTML5では非推奨とされています。現代のWeb開発では、以下のようにquerySelectorAll()を使う方法が一般的です。

const thirdAnchor = document.querySelectorAll('a')[2].innerHTML;

この方法であれば、name属性の有無にかかわらず、すべてのアンカー要素を柔軟に取得・操作することができます。


  1. JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

    JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要