How to Use Object-Oriented JavaScript to Style and Manipulate DOM Nodes?

Estimated read time 1 min read

Here are a few ways to use Object-Oriented JavaScript to style and manipulate DOM nodes:

  1. Creating custom classes: Create custom classes with properties and methods to manipulate and style DOM nodes.
  2. Using classList and setAttribute: Use the classList property to add, remove, and toggle classes on an element, and setAttribute method to set element’s attributes.

Example:

// Creating custom class
class Navbar {
  constructor(element) {
    this.element = element;
  }
  
  hide() {
    this.element.style.display = "none";
  }
  
  show() {
    this.element.style.display = "block";
  }
}

// Using classList and setAttribute
let button = document.querySelector("button");
button.classList.add("btn", "btn-primary");
button.setAttribute("type", "submit");

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply