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

JavaScriptのdocument.imagesプロパティでドキュメント内の画像を取得・操作する方法

JavaScriptでページ内に含まれる<img>タグの情報を取得したい場合は、document.imagesプロパティを使用します。このプロパティは、ドキュメント内のすべての画像要素を格納したHTMLCollectionを返します。

document.imagesの基本

document.images.lengthとすることで、ドキュメント内に存在する<img>タグの総数を簡単に取得できます。また、インデックス番号を指定することで、個々の画像要素へアクセスすることも可能です。

サンプルコード

以下のコードを実行すると、JavaScriptのdocument.imagesプロパティの動作を確認できます。ここでは、ページ内の画像の数を取得して表示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript サンプル</title>
   </head>
   <body>
      <h1>チュートリアル集</h1>
      <img src="/javascript/images/javascript-mini-logo.jpg"/><br>
      <img src="/html5/images/html5-mini-logo.jpg"/>
      <script>
         var num = document.images.length;
         document.write("<br>画像の数は？ " + num);
      </script>
   </body>
</html>

実行結果

この例では、ページ内に2つの<img>タグが存在するため、画面には「画像の数は？ 2」と表示されます。

個別の画像へのアクセス方法

配列のようにインデックスを指定すれば、特定の画像要素を取得できます。例えば、1番目の画像のsrc属性（画像URL）を確認するには以下のように記述します。

var firstImage = document.images[0];
console.log(firstImage.src);  // 1番目の画像のURLを出力

このように、document.imagesを活用すれば、ページ内の画像の一括処理や動的な操作も簡単に行えます。

  1. MongoDBにJavaScript関数を保存・実行する方法をわかりやすく解説

    MongoDBに保存されたJavaScriptを操作する方法 MongoDBでは、JavaScriptの関数をデータベース内の特別なコレクション「system.js」に保存できます。この仕組みを利用すれば、よく使う処理をサーバー側に登録しておき、必要なときにいつでも呼び出すことが可能です。関数の保存には db.system.js.save() メソッドを使用します。 JavaScript関数を保存する基本構文 db.system.js.save({ _id: anyFunctionName, value: function (returnValue) { re

  2. PythonのBokehで画像を操作・表示する方法

    Pythonの可視化ライブラリBokehで画像を扱うには、image_url()メソッドを使い、画像URLのリストを渡すのが基本です。このメソッドを使うことで、ローカルやWeb上にある画像をプロット領域内に簡単に配置できます。実装の手順output_file()でデフォルトの出力先を設定し、show()を呼び出したときに結果がHTMLファイルとして保存されるようにします。figure()でプロット用の新しいFigure（図）オブジェクトを作成します。image_url()メソッドで、指定したURLから読み込んだ画像を描画します。show()を呼び出して、Bokehオブジェクトやアプリケーション