How to Return the Number of Images in a Document with JavaScript? Last Updated : 20 Jun, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report We will learn how we can return the number of images in a document with JavaScript. We need to access and manipulate the DOM (Document Object Model) of the webpage. The DOM represents the structure of an HTML document as a tree of objects. JavaScript can interact with the DOM to manipulate and retrieve information about the document. In the DOM, each image is represented by an <img> element. We can use various DOM methods to select these elements. The .length property of the HTMLCollection gives the number of elements in the collection, which is the number of <img> elements in the document. Below are the approaches to find the number of images in a document using JavaScript: Table of Content Using getElementsByTagName() methodUsing querySelectorAllUsing getElementsByTagName() methodCreate an HTML file and add the basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Add a few <img> elements within the <body> to test the script. Inside the <script> tag, the getElementsByTagName('img') method is used to select all image elements.The length property of the resulting HTML collection is used to determine the number of images.Example: Demonstration of finding the number of images in a document using getElementsByTagName() method. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { width: 250px; } </style> </head> <body> <!-- Adding some images for testing --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620102809/TOEFL-2024-Exam-Practice-Tests-FREE.webp" alt="Image 1"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620103136/TOEFL-Mock-Practice-Test-1.webp" alt="Image 2"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620103529/TOEFL-Mock-Practice-Test-2.webp" alt="Image 3"> <script> // Select all image elements in the document let images = document.querySelectorAll('img'); // Get the number of images let numberOfImages = images.length; // Output the number of images to the console console.log("Number of images in the document: " + numberOfImages); </script> </body> </html> Output: OutputUsing querySelectorAllCreate a New HTML File and inside the HTML file, add the basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Within the <body> tag, add a few <img> elements to test the script. Inside the <script> tag, write JavaScript code to select all image elements using document.querySelectorAll('img'), count the number of images, and log the count. Example: Demonstration of finding the number of images in a document using querySelectorAll() method. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> img { width: 250px; } </style> </head> <body> <!-- Adding some images for testing --> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620102809/TOEFL-2024-Exam-Practice-Tests-FREE.webp" alt="Image 1"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620103136/TOEFL-Mock-Practice-Test-1.webp" alt="Image 2"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240620103529/TOEFL-Mock-Practice-Test-2.webp" alt="Image 3"> <script> // Select all image elements in the document let images = document.querySelectorAll('img'); // Get the number of images let numberOfImages = images.length; // Output the number of images to the console console.log("Number of images in the document: " + numberOfImages); </script> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to count the number of times a button is clicked using JavaScript ? B bug8wdqo Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to use document.images in JavaScript ? In JavaScript, the document.images property returns a collection of all "<img>" elements within the current document. We can manipulate these images using various properties and methods. We will see how to work with document.images in JavaScript. ApproachFirst, create a basic HTML structure an 2 min read Display the number of links present in a document using JavaScript Any webpage that is loaded in the browser can be represented by the Document interface. This serves as an entry point to the DOM tree and the DOM tree contains all elements such as <body> , <title>, <table> ,<a> etc. We can create a Document object using the Document() constr 2 min read How to count the number of times a button is clicked using JavaScript ? At times, it becomes necessary to monitor the number of times a user clicks a button. In this article, we are going to learn how to count the number of times a button is clicked using JavaScript Below are the approaches to count the number of times a button is clicked using JavaScript Table of Conte 3 min read How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to pass image as a parameter in JavaScript function ? We all are familiar with functions and their parameters and we often use strings, integers, objects, and arrays as a parameter in JavaScript functions but now will see how to pass an image as a parameter in the JavaScript functions. We will use vanilla JavaScript here. Approach: First, create a func 2 min read How to get the size of a JavaScript object ? In this article, we will see the methods to find the size of a JavaScript object. These are the following ways to solve the problem: Table of Content Using Object.keys() methodUsing Object.objsize() methodUsing Object.entries() methodUsing Object.values() methodUsing Object.keys() methodWe can get t 2 min read Like