使用 javascript 为所有 div 元素添加“onmouseover”功能

Question

<p class="glow" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Hello</p>

<p class="glow" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Hey</p>

This is my current setup. I'm trying to get both these lines to change color on hovering using the mouse over and mouse out event.

Unfortunately, I need to do this for all the lines of class "glow" which means I would have to copy the onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" line for every "glow" element.

Is there an easier way to do this using javascript? (I don't want to directly use the css hover class to change the color)

Answer 1

Try using querySelectorAll method.

querySelectorAll will return the list of nodes as an array with specified selector (class selector in below example). You can loop through those nodes and add your onmouseover and onmouseout event.

document.querySelectorAll('.glow').forEach((node) => {
    node.onmouseover = mouseOver;
    node.onmouseout = mouseOut;
})

Answer 2

Absolutely, you can access the DOM from your javascript code instead of the other way around.

const glowEls = document.querySelectorAll(".glow")
glowEls.forEach((element) => {
   // call your mouseOver function from here
})

Make sure this code is called AFTER the DOM has initialized otherwise your elements will not be found.

To make sure it loads after the DOM initialized either add "defer" to your script tag or put your script tag at the bottom of your body.

Small side note, it's usually preferred to access the DOM from javascript instead of called javascript from the DOM. This way, your html is much cleaner and stays true to it's single purpose.