HTML Document applets Collection: Accessing Applet Elements

Table of Contents

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 applets collection 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>
//<![CDATA[

        const applets_example1 = document.applets;
        const count_example1 = applets_example1.length;
        document.getElementById('appletCount').textContent = "Number of applets: " + count_example1;

//]]]]><![CDATA[>
</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>
//<![CDATA[

        const applets_example3 = document.applets;
        const named_applet_example3 = applets_example3.namedItem('myApplet');
        document.getElementById('namedAppletInfo').textContent = "Applet with name 'myApplet' ID: " + named_applet_example3.id;

//]]]]><![CDATA[>
</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);
        }

//]]]]><![CDATA[>
</script>

</body>
</html>

Output:

Applet ID: applet7
Applet ID: applet8
Applet ID: applet9

Example: Modifying Applet Properties

This example illustrates how to access an applet and modify its properties using JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Applet Collection Example</title>
</head>
<body>

    <applet id="applet10" code="MyApplet.class" width="200" height="100"></applet>
     <p id="modifiedAppletInfo"></p>

<script>
//<![CDATA[

        const applets_example5 = document.applets;
        const applet_example5 = applets_example5[0];

        applet_example5.width = 300;
        applet_example5.height = 150;

        document.getElementById('modifiedAppletInfo').textContent = "Applet width: " + applet_example5.width + ", height: " + applet_example5.height;

//]]]]><![CDATA[>
</script>

</body>
</html>

Output:

Applet width: 300, height: 150

Note: While the <applet> tag is deprecated, these examples are useful for demonstrating how to access elements within the DOM using document.applets. Remember to avoid using <applet> in modern web development. ⚠️

Use Cases of `document.applets` Collection

Despite being linked to a deprecated tag, understanding the document.applets collection provides valuable insights into DOM manipulation and live collections. This collection and similar live collections (like document.forms, document.images, etc.) are primarily used for:

Legacy Applications: Maintaining and updating older web applications that rely on applets.
Educational Purposes: Understanding historical web technologies and DOM manipulation techniques.
Dynamic Scripting: Creating interactive and dynamic web experiences (though modern alternatives are usually preferred).

Browser Support

The document.applets collection is widely supported by all major web browsers, although it's important to remember that the <applet> tag itself is deprecated.

Note: While the document.applets collection is well-supported, using the <applet> tag itself is discouraged in favor of more modern technologies like JavaScript, WebGL, and WebAssembly. 💡

Conclusion

The document.applets collection, though associated with a deprecated tag, is a good way to demonstrate how to access and manipulate elements in the DOM using a live HTMLCollection. It provides a historical insight into web development and can be helpful for maintaining legacy code. Remember to favor modern technologies for new web development projects. Always prioritize using current, well-supported HTML elements and JavaScript features.

HTML Document applets Collection: Accessing Applet Elements

HTML Document applets Collection: Accessing Applet Elements

What is the document.applets Collection?

Purpose of the document.applets Collection

Syntax of the document.applets Collection

Key Properties and Methods

Accessing Applet Elements with document.applets

Basic Access: Getting the Number of Applets

Accessing Applets by Index

Accessing Applets by Name

Iterating Through All Applets

Example: Modifying Applet Properties

Use Cases of document.applets Collection

Browser Support

Conclusion

Related Posts

HTML Applet Tag: Embedding Legacy Java Applets (Deprecated)

HTML Document embeds Collection: Accessing Embed Elements

HTML Document links Collection: Accessing Link Elements

HTML DOM all Collection: Accessing all Elements

HTML DOM HTMLCollection Object: Accessing Collections of Elements

HTML HTMLCollection item() Method: Accessing Element by Index

HTML Document images Collection: Accessing Image Elements

HTML Document scripts Collection: Accessing Script Elements

HTML DOM Code Object: Accessing Code Elements

HTML Document Anchors Collection: Accessing Anchor Elements

HTML Document body Property: Document Body Element

HTML Document forms Collection: Accessing Form Elements

Continue Reading

What is &amp Used For – HTML Programming Tutorial

How can I build/concatenate strings in JavaScript? – Complete Tutorial

What’s the Difference Between and as Line Breaks – HTML vs JavaScript Explained

What’s the Difference Between and Space in HTML Programming

Vite: Application Works on localhost:5173 but Not on 127.0.0.1:5173 – React.js Troubleshooting Guide

Alternative for – HTML Development Guide

HTML Document `applets` Collection: Accessing Applet Elements

What is the `document.applets` Collection?

Purpose of the `document.applets` Collection

Syntax of the `document.applets` Collection

Accessing Applet Elements with `document.applets`

Use Cases of `document.applets` Collection

What’s the Difference Between
and as Line Breaks – HTML vs JavaScript Explained