Harshil Chovatiya - Day 17: Modifying DOM Elements

Modifying DOM Elements

In today's lesson, we will delve into techniques for modifying DOM elements using JavaScript. Modifying elements allows us to dynamically update content, attributes, and styles on a web page.

1. Changing Text Content:

You can change the text content of an element using the textContent property.

Example:

                    
                    
            var paragraph = document.getElementById("myParagraph");
            paragraph.textContent = "New text content!";
                    
                

After executing this code, the paragraph element's content will be updated to "New text content!"

2. Modifying Attributes:

You can change element attributes using JavaScript. For example, you can modify the src attribute of an image or the href attribute of a link.

Example:

                    
                    
            var image = document.getElementById("myImage");
            image.src = "new-image.jpg";
                    
                

This code updates the image source to "new-image.jpg."

3. Adding and Removing Classes:

JavaScript allows you to add or remove CSS classes from elements using the classList property.

Example:

                    
                    
            var image = document.getElementById("myImage");
            image.src = "new-image.jpg";
                    
                

After running this code, the myDiv element will have the "highlight" class added and the "box" class removed.

Conclusion:

Modifying DOM elements dynamically is a fundamental skill in web development. With the ability to change text content, attributes, and CSS classes, you can create interactive and responsive web applications. As you continue learning, you'll discover more advanced techniques for DOM manipulation that will enhance your web development capabilities.

Social Media