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

HTML DOM アンカー（a要素）の type プロパティとは？取得・設定方法を解説

HTML DOM の type プロパティは、アンカー（<a>）タグに紐づくリンクの type 属性の値を取得または設定するために使用されます。この属性は HTML5 で導入されたもので、あくまで補助的な情報を示すためのものであり、記述は必須ではありません。type 属性には、単一の MIME（Multipurpose Internet Mail Extensions：多目的インターネットメール拡張）タイプの値が格納されます。

構文

type プロパティの構文は以下のとおりです。

type プロパティの値を取得する場合

anchorObject.type

type プロパティに値を設定する場合

anchorObject.type = MIME-type

サンプルコード

それでは、アンカーの type プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" type="text/html" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.example.com">example</a></p>
<p>ボタンをクリックすると、type 属性の取得と設定ができます。</p>
<button onclick="getType1()">GetType</button>
<button onclick="setType2()">SetType</button>
<p id="Type1"></p>
<script>
    function getType1() {
        var x = document.getElementById("Anchor").type;
        document.getElementById("Type1").innerHTML = x;
    }
    function setType2(){
        document.getElementById("Type1").innerHTML="Type has been set";
        document.getElementById("Anchor2").type="text/html";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM アンカー（a要素）の type プロパティとは？取得・設定方法を解説

GetType ボタンをクリックした場合：

HTML DOM アンカー（a要素）の type プロパティとは？取得・設定方法を解説

SetType ボタンをクリックした場合：

HTML DOM アンカー（a要素）の type プロパティとは？取得・設定方法を解説

コードの解説

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

まず、id が「Anchor」と「Anchor2」の2つのリンクを用意しました。「Anchor」には MIME タイプとして「text/html」が設定されていますが、「Anchor2」には MIME タイプが設定されていません。

<p><a id="Anchor" type="text/html" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.example.com">example</a></p>

次に、それぞれの関数を実行するための「GetType」「SetType」の2つのボタンを配置しています。

<button onclick="getType1()">GetType</button>
<button onclick="setType2()">SetType</button>

getType1() 関数は、id が「Anchor」であるアンカータグに設定されている type の値を取得し、画面に表示します。一方、setType2() 関数は、id が「Anchor2」であるアンカータグの type を「text/html」に設定します。

function getType1() {
    var x = document.getElementById("Anchor").type;
    document.getElementById("Type1").innerHTML = x;
}
function setType2(){
    document.getElementById("Type1").innerHTML="Type has been set";
    document.getElementById("Anchor2").type="text/html";
}

まとめ

type プロパティを活用することで、JavaScript から動的にリンクの MIME タイプを読み取ったり変更したりすることが可能になります。ただし、type 属性はブラウザの実際の動作に影響を与えるものではなく、あくまで参考情報として扱われる点に注意してください。

  1. 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

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種