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

JavaScriptでリンクのtype属性の値を取得する方法

JavaScriptでリンク（アンカー要素）のtype属性の値を取得するには、typeプロパティを使用します。

type属性は、リンク先のドキュメントがHTML（text/html）なのか、CSS（text/css）なのかといった、リソースの種類（MIMEタイプ）を示すために使われる属性です。この属性の値は、JavaScriptから簡単に読み取ることができます。

サンプルコード

以下のコードを実行すると、リンクのtype属性の値を取得して画面に表示できます。

<!DOCTYPE html>
<html>
   <body>
      <p><a id="anchorid" type="text/html" target="_blank" href="https://www.qries.com/">Qries</a></p>
      <script>
         var myVal = document.getElementById("anchorid").type;
         document.write("type属性の値: " + myVal);
      </script>
   </body>
</html>

コードの解説

このコードの処理の流れは以下のとおりです。

  • document.getElementById("anchorid") で、idが「anchorid」のアンカー要素を取得します。
  • 取得した要素の .type プロパティを参照することで、type属性の値（この例では text/html）を取り出します。
  • document.write() を使って、取得した値をページ上に出力します。

実行結果は次のように表示されます。

type属性の値: text/html

補足：より現代的な書き方

document.write() は現在では非推奨とされることが多いため、実際の開発では以下のように textContent を使って表示する方法が推奨されます。

var myVal = document.getElementById("anchorid").type;
document.getElementById("result").textContent = "type属性の値: " + myVal;

このように、typeプロパティを使えば、リンクのtype属性の値を1行で簡単に取得できます。

  1. JavaScriptで画像のuseMap属性の値を取得する方法

    画像要素に設定された usemap 属性の値をJavaScriptで取得したい場合は、useMap プロパティを使用します。このプロパティは、対象の画像がどのイメージマップ（<map> 要素）に関連付けられているかを文字列として返します。以下のコードを実行すると、画像の usemap 属性の値を画面に表示できます。サンプルコード<!DOCTYPE html> <html>    <body>       <img id = "myid" src = "/imag

  2. JavaScriptでページ内リンクのhref属性を取得する方法｜document.linksの使い方を解説

    JavaScriptでリンクのhref属性を取得する方法JavaScriptでは、document.linksコレクションを使うことで、ドキュメント内のリンク（<a>タグ）に簡単にアクセスできます。特定のリンクのhref属性を取得するには、document.links[インデックス].hrefのように記述します。このコレクションは配列と同じように動作します。つまり、最初のリンクがインデックス「0」、2番目のリンクがインデックス「1」というように、出現順に番号が割り当てられます。それでは、具体的なサンプルコードを使って仕組みを見ていきましょう。例1：3番目のリンクのhref属性を取得