Javascript Modifying element properties

Using the Document Object Model in JavaScript, you may change the characteristics of HTML elements. (DOM). Dynamically interacting with a web page’s structure and content is made possible by the DOM.

You must first pick the element using one of the DOM selection methods, such as getElementById, querySelector, or querySelectorAll, in order to make changes to its properties. Once the element has been chosen, you can edit its properties by using the bracket or dot notation.

Changing an element’s text content:

let myElement = document.getElementById('my-element');
myElement.textContent = 'Hello, world!';

Changing an element’s HTML content:

let myElement = document.getElementById('my-element');
myElement.innerHTML = '<strong>Hello, world!</strong>';

Changing an element’s CSS style:

let myElement = document.getElementById('my-element');
myElement.style.backgroundColor = 'red';
myElement.style.color = 'white';

Adding or removing CSS classes:

let myElement = document.getElementById('my-element');
myElement.classList.add('highlight');
myElement.classList.remove('highlight');

Modifying form element values:

let myInput = document.getElementById('my-input');
myInput.value = 'New value';

These are merely a few illustrations of how you can change element characteristics using JavaScript. In order to construct dynamic, interactive web pages, you can work with HTML elements using the extensive collection of properties and methods provided by the DOM.

Previous
Next