I am taking up JS on my own. This endeavor exposes me to various ways of achieving the same thing in JS. Particularly, I wondering about the correctness of the following ways of working with the DOM.
I have a simple html page
<body>
<h1 class="red">I am red</h1>
<h2 class="blue">I am blue</h2>
<h3 class="yellow">I am yellow</h3>
<script src="app.js"></script>
</body>
Here, I am trying to change the color of the html elements with a click event
document.body.addEventListener("click", function (event) {
if (!(event.target === document.body)) {
event.target.style.color = event.target.classList;
}
});
Array.from(document.body.children).forEach((child) => {
child.addEventListener("click", function () {
this.style.color = this.classList;
});
});