Manipulating HTML Elements with JavaScript

JavaScript allows you to manipulate HTML elements and change the content, attributes, and styles of a web page. This enables you to create dynamic and interactive web pages that can respond to user input and changing data.

In this article, we’ll go over the different ways you can manipulate HTML elements with JavaScript, including using the Document Object Model (DOM), working with HTML forms, and creating and modifying CSS styles.

The Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing an element in the document.

You can use the DOM to access and modify HTML elements in JavaScript. This is done by using the document object and various methods and properties, such as getElementById, getElementsByTagName, and querySelector.

Here’s an example of how to use the DOM to change the content of an element:

var header = document.getElementById("header"); 
header.innerHTML = "Welcome to My New Page";

And here’s an example of how to use the DOM to change the attributes of an element:

header.setAttribute("class", "new-class");

Working with HTML Forms

HTML forms allow you to gather user input and send it to a server. You can use JavaScript to access and manipulate form elements, such as text fields, radio buttons, and select lists.

To access a form element in JavaScript, you can use the document.getElementById method. Here’s an example of how to access a text field in a form:

var textField = document.getElementById("text-field");

You can then use various methods and properties to manipulate the form element. For example, you can use the value property to get or set the value of a text field:

textField.value = "Hello World!";

You can also use the checked property to get or set the checked state of a radio button or checkbox:

var radioButton = 
document.getElementById("radio-button"); 
radioButton.checked = true;

Creating and Modifying CSS Styles

You can use JavaScript to create and modify CSS styles for HTML elements. This allows you to change the appearance of a web page in response to user input or changing data.

To change the CSS styles of an element, you can use the style property and set the desired CSS properties. Here’s an example of how to change the color of an element:

var header = document.getElementById("header"); 
header.style.color = "red";

You can also use the className property to add or remove CSS classes from an element. Here’s an example of how to add a CSS class to an element:

header.className += " highlighted";

And here’s an example of how to remove a CSS class from an element:

header.className = header.className.replace(" highlighted", "");

Conclusion

Manipulating HTML elements with JavaScript allows you to create dynamic and interactive web pages. By understanding how to use the DOM, work with HTML forms, and create and modify CSS styles, you’ll have the skills you need to create powerful and engaging web applications.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

var header = document.getElementById("header");
header.innerHTML = "Welcome to My New Page";

var textField = document.getElementById("text-field");
textField.value = "Hello World!";

var radioButton = document.getElementById("radio-button");
radioButton.checked = true;

var header = document.getElementById("header");
header.style.color = "red";

header.className += " highlighted";