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

HTML DOM アンカーのsearchプロパティとは?使い方とサンプルコードで解説

HTML DOM アンカーのsearchプロパティとは

HTML DOM の search プロパティは、アンカータグ(<a>)に関連付けられたプロパティの一つで、href 属性値に含まれるクエリ文字列(query string)部分を取得または設定します。

クエリ文字列とは、URL 内の「?」以降の部分を指します。主にサーバーへ情報を渡す目的で使用され、GET リクエストを送信する際に、パラメータ情報が平文のままリンク(URL)に埋め込まれる形になります。

構文

a) search プロパティの値を取得する場合

anchorObject.search

b) search プロパティに値を設定する場合

anchorObject.search = querystring

使用例

それでは、HTML DOM のアンカー search プロパティを使った具体的なサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" target="_blank"
href="https://www.examplesite.com/ex.htm?id=Username">Example Site</a></p>
<p>下のボタンをクリックすると、上記サイトのクエリ文字列部分が変更されます</p>
<p>変化を確認したい場合は、ボタンをクリックする前にあらかじめ URL をチェックしておいてください</p>
<button onclick="demo()">検索を変更</button>
<script>
    function demo() {
        document.getElementById("myAnchor").search = "program=Sample";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような動作になります。

ボタンをクリックする前、リンク先の URL は以下のとおりです。

www.examplesite.com/ex.htm?id=Username

「検索を変更」ボタンをクリックした後は、URL が次のように変化します。

www.examplesite.com/ex.htm?program=Sample

コードの解説

上記の例では、以下のような流れで処理を行っています。

まず、search プロパティの操作対象となるアンカータグを用意しました。このアンカーに対して、search プロパティを使うことでクエリ文字列の値を設定したり取得したりできます。

<p><a id="myAnchor" target="_blank"
href="https://www.examplesite.com/ex.htm?id=Username">Example Site</a></p>

次に、「検索を変更」というボタンを作成し、クリックされたときに demo() 関数が実行されるようにしています。

<button onclick="demo()">検索を変更</button>

demo() 関数は、search プロパティを書き換えることで、クエリ文字列部分を id=Username から program=Sample へと変更します。

function demo() {
    document.getElementById("myAnchor").search = "program=Sample";
}

  1. HTML DOM 入力検索フィールドの form プロパティの使い方とサンプルコード

    HTML DOM の Input Search form プロパティは、指定された入力検索フィールド（type=search）を含むフォームへの参照を返すために使用されます。検索フィールドがフォームの外に配置されている場合は、単純に NULL が返されます。なお、このプロパティは読み取り専用です。 構文 input search の form プロパティの構文は以下のとおりです。 searchObject.form サンプルコード HTML DOM Input search form プロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html&g

  2. HTML DOMアンカーのhostnameプロパティの使い方を解説

    HTML DOMのAnchor hostnameプロパティは、リンク先URLのうちホスト名（ドメイン名）のみを取得・設定するためのプロパティです。よく似たプロパティである「host」との違いは、ポート番号を含むかどうかという点にあります。host：ホスト名＋ポート番号を返す（例：www.demo.com:6064）hostname：ホスト名のみを返す（例：www.demo.com）hostnameプロパティを設定する構文hostnameプロパティに値を設定する場合は、以下のように記述します。anchorObj.hostname = hostname上記の「hostname」には、設定したいUR