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

JavaScriptでドキュメント内の最初の画像のIDを取得する方法

JavaScriptでドキュメント内の最初の画像のIDを取得するには、document.images プロパティを使用します。このプロパティは、ドキュメント内に存在するすべての画像をコレクション（HTMLCollection）として返し、インデックス番号を指定することで個々の画像要素にアクセスできます。

document.images プロパティとは

document.images は読み取り専用のコレクションで、HTMLドキュメント内の <img> 要素が文書の出現順に格納されます。配列と同様に [0] のようにインデックスを指定してアクセスできるため、document.images[0].id と書けば最初の画像のIDを簡単に取得できます。

サンプルコード

以下のコードを実行すると、ドキュメント内の最初の画像のIDを取得して表示できます。

<!DOCTYPE html>
<html>
   <body>
      <img id="image1" src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg">
      <img id="image2" src="https://www.tutorialspoint.com/hive/images/hive-mini-logo.jpg">
      <img id="image3" src="https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg">
      <img id="image4" src="https://www.tutorialspoint.com/maven/images/maven-mini-logo.jpg">
      <script>
         var val = document.images.length;
         document.write("<br>ドキュメント内の画像の数：" + val);
         document.write("<br>最初の画像のID：" + document.images[0].id);
      </script>
   </body>
</html>

実行結果

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

ドキュメント内の画像の数：4
最初の画像のID：image1

コードの解説

  • document.images.length：ドキュメント内に含まれる画像の総数を返します。上記の例では4枚の画像があるため「4」が出力されます。
  • document.images[0].id：コレクションの先頭（インデックス0）にある画像要素のID属性値を返します。ここでは image1 が取得されます。

なお、モダンなWeb開発では document.write() の代わりに、console.log() やDOM操作（textContent への代入など）を使って結果を表示する方法が推奨されます。

  1. JavaScriptでリスト項目のマーカーに画像を設定する方法

    リスト項目（li要素）のマーカーに画像を設定したい場合は、JavaScriptの listStyleImage プロパティを使用します。このプロパティはCSSの list-style-image に対応しており、通常の黒丸（・）や白丸の代わりに、好きな画像を箇条書きの記号として表示できます。 使い方のポイント listStyleImage プロパティには、url(画像のURL) の形式で値を指定します。対象となるのは ul や ol などのリスト要素です。 サンプルコード 以下のコードでは、ボタンをクリックすると listStyleImage プロパティによって、順序付きリストのマーカーが指定

  2. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo