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

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

Webページ（ドキュメント）に含まれる画像の数を取得したい場合、JavaScriptのimagesプロパティを利用するのが最も簡単な方法です。

document.imagesは、ドキュメント内のすべての<img>要素を格納したコレクション（HTMLCollection）を返します。このコレクションに対して.lengthを使用することで、画像の総数を数値として取得できます。

基本的な使い方

以下のように記述するだけで、ドキュメント内の画像の数を取得できます。

var val = document.images.length;

サンプルコード

実際に動作を確認できる完全なサンプルコードがこちらです。ページ内に4つの画像を配置し、その枚数を画面に表示しています。

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

実行結果

ドキュメント内の画像の数：4

補足ポイント

  • document.imagesは読み取り専用のコレクションであり、ページ内のすべての画像要素が自動的に含まれます。
  • 特定の範囲だけを数えたい場合は、querySelectorAll('img').lengthを使うと柔軟に対応できます。
  • スクリプトは画像タグより後に配置するか、DOMContentLoadedイベント内で実行すると、確実にすべての画像をカウントできます。
  1. JavaScriptでドキュメント内のリンク数を取得する方法

    JavaScriptでドキュメント内のリンク数を取得するJavaScriptのDOM（Document Object Model）には、ドキュメントに関するさまざまな情報を取得するためのプロパティが多数用意されています。その中でもdocument.links.lengthを使用すると、ドキュメント内に含まれるリンク（<a>タグ）の総数を簡単に取得できます。document.linksは、href属性を持つすべてのアンカー要素を格納したHTMLCollectionを返します。そのlengthプロパティを参照することで、リンクの総数がわかります。この操作はページの通常の動作に影響を与え

  2. JavaScriptで数値の立方根を求める方法！Math.cbrt()メソッドの使い方を解説

    JavaScriptのMathオブジェクトと立方根JavaScriptでは、Mathオブジェクトを使用することで、さまざまな数学的な操作を実行できます。その中でもMath.cbrt()は、数値の立方根（三乗根）を求めるために特化したメソッドです。引数として数値を1つ受け取り、その立方根の値を戻り値として返します。平方根を求めるMath.sqrt()とは異なり、負の数に対しても有効な結果を返せる点が大きな特徴です。数学的に、負の数の立方根も実数として定義されるためです。構文Math.cbrt(64);引数に数値を渡すと、その立方根の値が戻り値として返されます。例1：正の値の立方根を求める次の例で