Sling Academy
Home/TypeScript/Using element.setAttribute() method in TypeScript

Using element.setAttribute() method in TypeScript

Last updated: February 14, 2024

Introduction

TypeScript enhances JavaScript with type safety and better tooling, making web development more efficient and robust. Among numerous DOM manipulation methods, element.setAttribute() plays a crucial role in dynamically changing attributes of HTML elements. This article explores how to use this method within the strongly typed environment of TypeScript.

Using TypeScript with element.setAttribute()

The element.setAttribute() method in TypeScript is identical to its JavaScript counterpart but benefits from type checking. This method adds a specified attribute to an HTML element, or updates its value if the attribute already exists. Its syntax is element.setAttribute(attribName, attribValue), where attribName is the name of the attribute, and attribValue is the value to be assigned to the attribute.

Basic Usage

Let’s start with a basic example to understand how to use element.setAttribute() in TypeScript:

// Assuming we have an HTML element with the id 'example'
const elem: HTMLElement | null = document.getElementById('example');
if (elem) {
  elem.setAttribute('data-custom', '12345');
}

This code snippet fetches an HTML element by its ID and sets a custom data attribute data-custom with a value of 12345. The use of TypeScript’s type guard (if (elem)) ensures that elem.setAttribute() is only called if elem is not null.

Integrating with TypeScript Interfaces

Next, let’s explore how element.setAttribute() can work in tandem with TypeScript interfaces to enforce type safety and enhance code readability:

interface CustomElementAttributes {
  role: string;
  type: string;
}

function setAttributes(elem: HTMLElement, attrs: CustomElementAttributes): void {
  for (const key in attrs) {
    if (attrs.hasOwnProperty(key)) {
      elem.setAttribute(key, attrs[key]);
    }
  }
}

// Usage
const button: HTMLElement | null = document.getElementById('action-button');
if (button) {
  setAttributes(button, {
    role: 'button',
    type: 'submit',
  });
}

In this example, an interface CustomElementAttributes is defined to type check the attributes passed to setAttributes function. This method onwards applies the attributes to the selected element, ensuring code consistency and minimizing runtime errors.

Advanced Interaction with Event Listeners

For a more advanced use case, let’s apply element.setAttribute() in conjunction with event listeners:

function enhanceButton(buttonId: string): void {
  const button: HTMLElement | null = document.getElementById(buttonId);
  if (!button) return;

  button.setAttribute('disabled', 'true');
  setTimeout(() => button.removeAttribute('disabled'), 5000);

  button.addEventListener('click', function() {
    alert('Button was clicked!');
  });
}

// Usage
enhanceButton('submit-button');

In this sophisticated example, a button is initially disabled for 5 seconds to prevent premature submission. The use of setTimeout() demonstrates dynamic attribute manipulation over time. Additionally, an event listener is attached to alert users upon clicking the button. This illustrates a powerful aspect of element.setAttribute() — its ability to interact seamlessly with other DOM manipulation techniques for enriched user experiences.

Conclusion

The element.setAttribute() method in TypeScript is a versatile tool for modifying HTML elements dynamically. By leveraging TypeScript’s type safety, developers can avoid common errors and enhance the maintainability of their code. Through the examples provided, it becomes evident how element.setAttribute() can be used effectively for a wide range of applications – from basic attribute setting to more advanced integrations with other DOM operations.

Next Article: Using element.removeAttribute() method in TypeScript

Previous Article: TypeScript element.remove() Method (With Examples)

Series: TypeScript: Intermediate & Advanced Tutorials

TypeScript

You May Also Like

  • TypeScript: setInterval() and clearInterval() methods (3 examples)
  • TypeScript sessionStorage: CRUD example
  • Using setTimeout() method with TypeScript (practical examples)
  • Working with window.navigator object in TypeScript
  • TypeScript: Scrolling to a specific location
  • How to resize the current window in TypeScript
  • TypeScript: Checking if an element is a descendant of another element
  • TypeScript: Get the first/last child node of an element
  • TypeScript window.getComputerStyle() method (with examples)
  • Using element.classList.toggle() method in TypeScript (with examples)
  • TypeScript element.classList.remove() method (with examples)
  • TypeScript: Adding Multiple Classes to An Element
  • element.insertAdjacentHTML() method in TypeScript
  • TypeScript – element.innerHTML and element.textContent
  • Using element.removeAttribute() method in TypeScript
  • Working with Document.createElement() in TypeScript
  • Using getElementById() method in TypeScript
  • Using Window prompt() method with TypeScript
  • TypeScript – window.performance.measure() method (with examples)