HTML Document applets Collection: Accessing Applet Elements
The document.applets collection in HTML provides a way to access all <applet> elements embedded within an HTML document. This collection is a live HTMLCollection, meaning any changes to the document's applet elements are immediately reflected in the collection. Although the <applet> tag is deprecated in favor of more modern technologies, understanding how it was used and how to access applets via the DOM can be helpful for maintaining older applications or for historical context. This article delves into using the document.applets collection with detailed examples.
What is the document.applets Collection?
The document.applets collection is a read-only property that returns an HTMLCollection of all the <applet> elements within an HTML document. This collection is primarily used in JavaScript to access applet elements, manipulate their properties, or interact with their methods.
Purpose of the document.applets Collection
The main purpose of this collection is to:
- Provide a dynamic list of all
<applet>elements in the document. - Allow developers to programmatically access applet elements using JavaScript.
- Enable runtime manipulation of the applets.
- Facilitate the removal or addition of applet elements via JavaScript (though the
appletscollection itself is read-only, the DOM can be manipulated to achieve this).
Syntax of the document.applets Collection
The document.applets collection does not have any specific syntax other than being accessed as a property of the document object:
const appletCollection = document.applets;
The appletCollection variable will be an HTMLCollection object.
Key Properties and Methods
The HTMLCollection object obtained from document.applets has a few key properties and methods:
| Property/Method | Type | Description |
|---|---|---|
length |
Number | Returns the number of applet elements in the collection. |
item(index) or [index] |
Function/Syntax | Returns the applet element at the specified index (zero-based). |
namedItem(name) |
Function | Returns the applet element with the given name. |
Note: The HTMLCollection is a live collection, meaning that changes made to the HTML applets in the document are immediately reflected in the collection. 🔄
Accessing Applet Elements with document.applets
Let's explore some practical examples to demonstrate how to use the document.applets collection.
Basic Access: Getting the Number of Applets
This example shows how to get the number of <applet> elements in the document using the length property.
<!DOCTYPE html>
<html>
<head>
<title>Applet Collection Example</title>
</head>
<body>
<applet id="applet1" code="MyApplet.class" width="200" height="100"></applet>
<applet id="applet2" code="AnotherApplet.class" width="150" height="75"></applet>
<p id="appletCount"></p>
<script></script>
</body>
</html>
Output:
Number of applets: 2
Accessing Applets by Index
This example demonstrates how to access individual applet elements by their index within the HTMLCollection.
<!DOCTYPE html>
<html>
<head>
<title>Applet Collection Example</title>
</head>
<body>
<applet id="applet3" code="MyApplet.class" width="200" height="100"></applet>
<applet id="applet4" code="AnotherApplet.class" width="150" height="75"></applet>
<p id="appletInfo"></p>
<script>
//<![CDATA[
const applets_example2 = document.applets;
const first_applet_example2 = applets_example2[0];
const second_applet_example2 = applets_example2.item(1);
let appletInfo_text = "First applet ID: " + first_applet_example2.id + ". ";
appletInfo_text += "Second applet ID: " + second_applet_example2.id + ".";
document.getElementById('appletInfo').textContent = appletInfo_text;
//]]]]><![CDATA[>
</script>
</body>
</html>
Output:
First applet ID: applet3. Second applet ID: applet4.
Accessing Applets by Name
This example shows how to access an applet element by its name attribute using namedItem().
<!DOCTYPE html>
<html>
<head>
<title>Applet Collection Example</title>
</head>
<body>
<applet id="applet5" name="myApplet" code="MyApplet.class" width="200" height="100"></applet>
<applet id="applet6" name="anotherApplet" code="AnotherApplet.class" width="150" height="75"></applet>
<p id="namedAppletInfo"></p>
<script></script>
</body>
</html>
Output:
Applet with name 'myApplet' ID: applet5
Iterating Through All Applets
This example demonstrates how to iterate over all applet elements in the document using a for...of loop.
<!DOCTYPE html>
<html>
<head>
<title>Applet Collection Example</title>
</head>
<body>
<applet id="applet7" code="MyApplet.class" width="200" height="100"></applet>
<applet id="applet8" code="AnotherApplet.class" width="150" height="75"></applet>
<applet id="applet9" code="YetAnotherApplet.class" width="100" height="50"></applet>
<ul id="appletList"></ul>
<script>
//<![CDATA[
const applets_example4 = document.applets;
const appletList_example4 = document.getElementById('appletList');
for (const applet of applets_example4) {
const listItem = document.createElement('li');
listItem.textContent = 'Applet ID: ' + applet.id;
appletList_example4.appendChild(listItem);
}
//]]]]><
