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

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

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

rel属性は、リンク先ページとの関係性を示す属性です。特にSEOの観点では、検索エンジンのクローラーに対してリンクを「たどる（follow）」か「たどらない（nofollow）」かを伝える役割を持っています。

サンプルコード

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

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

出力結果

rel属性の値: nofollow

補足：getAttribute()メソッドでも取得可能

relプロパティのほかに、任意の属性値を取得できるgetAttribute()メソッドを使っても同じ結果が得られます。

var myVal = document.getElementById("anchorid").getAttribute("rel");

用途に応じて使い分けるとよいでしょう。単純にrel属性の値が必要な場合は、より簡潔に書けるrelプロパティがおすすめです。

  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属性を取得