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

HTML DOM History lengthプロパティの使い方とサンプルコード解説

HTML DOM の History length プロパティは、現在のウィンドウの履歴リスト(セッション履歴)に保存されている URL の数を返します。この値を取得することで、ユーザーがそのタブ内でどれほどページ間を移動してきたかを把握することができます。

構文

History length プロパティの基本的な構文は以下のとおりです。

history.length

ポイント

  • 読み取り専用:length プロパティは値の参照のみ可能で、直接変更することはできません。
  • 最小値は 1:新しいタブで最初のページを開いた状態でも、戻り値は「1」となります。
  • 上限あり:多くのブラウザでは履歴の保持数に上限(例:50件)があり、それを超えると最も古いエントリから削除されます。

サンプルコード

以下は、HTML DOM History length プロパティを使った具体例です。ボタンをクリックすると、現在のブラウザウィンドウの履歴数が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .btn{
        background-color:lightblue;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
    }
    .show{
        font-size:2rem;
        font-weight:bold;
        color:orange;
    }
</style>
</head>
<body>
<h1>History length Property Example</h1>
<button type="button" onclick="getHistoryLength()" class="btn">Click me to get History length
<div class="show"></div>
<script>
    function getHistoryLength(){
        var historyLength=history.length;
        document.querySelector(".show").innerHTML = historyLength;
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTML DOM History lengthプロパティの使い方とサンプルコード解説

表示された「青色のボタン」をクリックすると、現在のブラウザウィンドウにおける履歴の長さ(履歴リストに含まれる URL の数)がオレンジ色のテキストとして出力されます。

HTML DOM History lengthプロパティの使い方とサンプルコード解説

まとめ

History length プロパティは、JavaScript だけで現在のセッション履歴のエントリ数を手軽に確認できる便利な機能です。ページ遷移の回数に応じた処理やデバッグ時に活用するとよいでしょう。

  1. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト(空白文字を含む)に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意: textContentプロパティに値を設定すると、ノ

  2. HTML DOM Ol typeプロパティとは?順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト(<ol> 要素)で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル(数字、アルファベット、ローマ数字など)を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字(1