|
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:
Using getElementsByTagName() method- Create 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:
.png) Output Using querySelectorAll- Create 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
|
