DOM Exercise

📰 Dev.to · mohandass

Learn to manipulate the DOM with JavaScript by completing exercises on changing text and toggling images

beginner Published 29 Apr 2026
Action Steps
  1. Create an HTML file and add a button and heading element to it
  2. Use JavaScript to select the heading element using document.getElementById
  3. Write a function to change the text of the heading element when the button is clicked
  4. Apply the function to the button's onclick event
  5. Test the code by clicking the button and verifying the text change
Who Needs to Know This

Frontend developers and beginners in web development can benefit from this exercise to improve their understanding of DOM manipulation

Key Insight

💡 DOM manipulation is a fundamental skill in web development, and practicing with exercises like these can help improve your skills

Share This
Learn DOM manipulation with JavaScript! Change text and toggle images with these exercises #webdev #javascript

Key Takeaways

Learn to manipulate the DOM with JavaScript by completing exercises on changing text and toggling images

Full Article

Title: DOM Exercise

URL Source: https://dev.to/mohandassmani/dom-exercise-18h2

Published Time: 2026-04-29T15:58:03Z

Markdown Content:
# DOM Exercise - DEV Community
[Skip to content](https://dev.to/mohandassmani/dom-exercise-18h2#main-content)

[![Image 1: DEV Community](https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png)](https://dev.to/)

[Powered by Algolia](https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral)

[Log in](https://dev.to/enter?signup_subforem=1)[Create account](https://dev.to/enter?signup_subforem=1&state=new-user)

## DEV Community

![Image 2](https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg)0 Add reaction

![Image 3](https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg)0 Like ![Image 4](https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg)0 Unicorn ![Image 5](https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg)0 Exploding Head ![Image 6](https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg)0 Raised Hands ![Image 7](https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg)0 Fire

0 Jump to Comments 0 Save Boost

Copy link

Copied to Clipboard

[Share to X](https://twitter.com/intent/tweet?text=%22DOM%20Exercise%22%20by%20mohandass%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fmohandassmani%2Fdom-exercise-18h2)[Share to LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fmohandassmani%2Fdom-exercise-18h2&title=DOM%20Exercise&summary=EXERCISE%201.Change%20Text%20on%20Button%20Click%20%20PROGRAM%3A%20%20%20%20%26lt%3Bbody%26gt%3B%20%20%20%20%20%20%26lt%3Bh1%20id%3D%22text%22%26gt%3Bwelcome...&source=DEV%20Community)[Share to Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fmohandassmani%2Fdom-exercise-18h2)[Share to Mastodon](https://s2f.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fmohandassmani%2Fdom-exercise-18h2)

[Share Post via...](https://dev.to/mohandassmani/dom-exercise-18h2#)[Report Abuse](https://dev.to/report-abuse)

[![Image 8: mohandass](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3800143%2F7b7ad166-c397-4ffc-a2d2-7c0fc07e8f89.png)](https://dev.to/mohandassmani)

[mohandass](https://dev.to/mohandassmani)
Posted on Apr 29

# DOM Exercise

[#html](https://dev.to/t/html)[#javascript](https://dev.to/t/javascript)[#webdev](https://dev.to/t/webdev)[#beginners](https://dev.to/t/beginners)

EXERCISE 1.Change Text on Button Click

PROGRAM:

```
<body>

<h1 id="text">welcome JavaScript</h1>
<button id="but" onclick="changetext()">change</button>
<script>

const heading = document.getElementById("text")
function changetext() {
heading.innerText="welcome DOM";
}

</script>
```

OUTPUT:

[![Image 9: ](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk4qr9evch838v0sqrfj.png)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk4qr9evch838v0sqrfj.png)

EXERCISE 2. Light ON/OFF

PROGRAM:

```
<body>
<img id="bulb-img" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
<button style="color: green; padding: 10px 15px; border-radius: 20px; font-size: medium;" id="bnt1" onclick="bulb_change()">ON</button>
<!-- <button id="butt2" onclick="bulb_normal()">off</button> -->

<script>

function bulb_change() {
cons
Read full article → ← Back to Reads