HTML DOM Script Object: Accessing Script Elements

The HTML DOM script object represents the <script> element in HTML. This object allows JavaScript to access and manipulate script elements dynamically, providing a way to modify or inspect scripts after the page has loaded. This article will explore the properties and methods of the script object with practical examples.

What is the HTML DOM Script Object?

The HTML <script> element is used to embed or reference executable scripts within an HTML document. The DOM script object, which is a representation of the <script> element, provides a set of properties and methods to access and control the script’s behavior programmatically. This allows developers to dynamically manage scripts, enhancing the interactivity of web pages.

Purpose of the HTML DOM Script Object

The primary purposes of the HTML DOM script object are:

• Accessing Script Attributes: Retrieve information about the script, such as its source, type, and defer settings.
• Dynamically Managing Scripts: Load, modify, or remove scripts based on user interactions or other runtime events.
• Inspecting Script Content: Access the content of inline scripts.
• Controlling Execution: Influence when and how a script is executed, using attributes like async and defer.

Accessing Script Elements

To access a <script> element using the DOM, you typically use methods like getElementById(), getElementsByTagName(), or querySelector(). Once you have a reference to the element, you can access its properties and methods.

Syntax

// Get a <script> element by its ID
const scriptElementById = document.getElementById("yourScriptId");

// Get all <script> elements
const scriptElements = document.getElementsByTagName("script");

// Get <script> elements with specific class using CSS selector
const scriptElementsQuery = document.querySelectorAll(".yourScriptClass");

Important Script Object Properties

Understanding the key properties of the script object is crucial for effectively using it.

Property	Type	Description
`src`	String	The URL of an external script file. Returns an empty string for inline scripts.
`type`	String	The MIME type of the script (e.g., “text/javascript”, “module”).
`text`	String	The text content of inline scripts. Returns an empty string for external scripts.
`async`	Boolean	Indicates whether the script is executed asynchronously.
`defer`	Boolean	Indicates whether the script is executed after the HTML document has been parsed.
`crossOrigin`	String	Indicates if CORS is enabled for the script (e.g., ‘anonymous’, ‘use-credentials’).
`referrerPolicy`	String	Indicates the referrer policy used when fetching the script.

Note: The text property is used to get or set the content of inline scripts. For external scripts, use src. 📝

Examples of Accessing Script Properties

Let’s explore some practical examples of accessing script elements and their properties. Each example includes HTML, and Javascript to showcase how it would be used in a typical scenario.

Accessing the src Property

This example demonstrates how to access the src property of an external script.

<script id="externalScript" src="my-external-script.js">
</script>
<p id="srcOutput"></p>

<script>
  const externalScriptElement = document.getElementById("externalScript");
  const srcOutputElement = document.getElementById("srcOutput");
  const scriptSrc = externalScriptElement.src;
  srcOutputElement.textContent = `External script source: ${scriptSrc}`;
</script>

Output:

External script source: (Path to my-external-script.js)

Note: The actual path shown will vary based on your environment.

Accessing the type Property

This example shows how to access the type property of a script element.

<script id="typeScript" type="text/javascript">

</script>
<p id="typeOutput"></p>

<script>
  const typeScriptElement = document.getElementById("typeScript");
  const typeOutputElement = document.getElementById("typeOutput");
  const scriptType = typeScriptElement.type;
  typeOutputElement.textContent = `Script type: ${scriptType}`;
</script>

Output:

Script type: text/javascript

Accessing the text Property

This example demonstrates how to access the text property of an inline script.

<script id="inlineScript">
    console.log("This is inline script.");
    function inlineFunction(){
        console.log("Inline Function called");
    }
</script>
<p id="textOutput"></p>
<script>
  const inlineScriptElement = document.getElementById("inlineScript");
  const textOutputElement = document.getElementById("textOutput");
  const scriptText = inlineScriptElement.text;
  textOutputElement.textContent = `Inline script content: ${scriptText}`;
</script>

Output:
Inline script content:

    console.log("This is inline script.");
    function inlineFunction(){
        console.log("Inline Function called");
    }

Note: The output includes the inline script’s content as a string. 💡

Accessing the async and defer Properties

This example shows how to access the async and defer properties of a script element.

<script id="asyncDeferScript" src="async-defer-script.js" async defer>

</script>
<p id="asyncDeferOutput"></p>

<script>
  const asyncDeferScriptElement = document.getElementById("asyncDeferScript");
  const asyncDeferOutputElement = document.getElementById("asyncDeferOutput");
  const scriptAsync = asyncDeferScriptElement.async;
  const scriptDefer = asyncDeferScriptElement.defer;
  asyncDeferOutputElement.textContent = `Async: ${scriptAsync}, Defer: ${scriptDefer}`;
</script>

Output:

Async: true, Defer: true

Dynamically Modifying Script Properties

This example demonstrates how to dynamically modify the type property of a script element.

<script id="dynamicScript" type="text/plain">
    console.log("This script won't execute");
</script>
<button id="modifyScriptBtn">Modify Script Type</button>
<p id="modifiedOutput"></p>

<script>
    const dynamicScriptElement = document.getElementById('dynamicScript');
    const modifyScriptButton = document.getElementById('modifyScriptBtn');
    const modifiedOutputElement = document.getElementById('modifiedOutput');

    modifyScriptButton.addEventListener('click', function() {
        dynamicScriptElement.type = 'text/javascript';
        modifiedOutputElement.textContent = `Script type modified to: ${dynamicScriptElement.type}`;
         // Optional: You can now execute the script if needed
          var script_execute = document.createElement('script');
            script_execute.text = dynamicScriptElement.text;
            document.body.appendChild(script_execute);

    });
</script>

Output:
(Initially, no output until button click)
After button click:
Script type modified to: text/javascript

Note: The script will execute after the type change when a new <script>
element is appended to the document. 🔥

Real-World Applications of the Script Object

The script object can be used in various scenarios:

• Dynamic Script Loading: Load scripts based on user behavior or application state.
• Plugin Systems: Create a plugin system where scripts are loaded dynamically based on user choices.
• Code Editors: Develop code editors or debuggers that need to access and manipulate script text.
• Conditional Script Execution: Control when and how scripts are executed by changing properties like async and defer.

Use Case Example: Dynamically Loading a Script

Here’s a detailed example of how to dynamically load an external script using the script object.

<button id="loadScriptBtn">Load External Script</button>
<p id="loadStatus"></p>

<script>
  const loadScriptButton = document.getElementById('loadScriptBtn');
  const loadStatusElement = document.getElementById('loadStatus');

  loadScriptButton.addEventListener('click', function() {
      loadStatusElement.textContent = 'Loading script...';
    const script = document.createElement('script');
    script.src = 'dynamic-script.js';
    script.onload = function() {
      loadStatusElement.textContent = 'Script loaded and executed.';
       // Call function from loaded script if needed
       if(window.loadedFunction)
        loadedFunction();
    };
     script.onerror = function() {
         loadStatusElement.textContent = 'Failed to load script.';
     };
    document.body.appendChild(script);
  });
</script>

Create an external JavaScript file named dynamic-script.js for the above example:

// dynamic-script.js
console.log("This is a dynamically loaded script.");

function loadedFunction() {
  console.log("loadedFunction() called from dynamic script");
}

Explanation:

1. A button is created to trigger the loading.
2. When the button is clicked, a new <script> element is created.
3. The src property is set to the path of the external script.
4. onload event listener is used to inform the user once the script has loaded and executed
5. An onerror event listener is added for failed script load.
6. The new script element is appended to the document body.
7. The dynamic script is loaded and its content is executed, which is demonstrated by a console log output.

Browser Support

The script object and its associated properties are supported in all modern web browsers, ensuring consistent behavior across different environments. 🚀

Conclusion

The HTML DOM script object provides a powerful means of dynamically interacting with <script> elements. By understanding the properties like src, type, text, async, and defer, you can programmatically control script behavior, load scripts dynamically, and create more interactive and flexible web applications. This article should serve as a comprehensive guide to working with the script object effectively.