Can the g composite element tag of SVG be manipulated using the dom node?

for example, the following two lines of code have two combination tags g. I wonder if I can tell the two combination g through the loop through document.getElementclassName (g), like div, which one I clicked with my mouse?
<g class="g">
    <rect x="150" y="100" width="100" height="100" fill="red"></rect>
</g>

<g class="g">
    <rect x="150" y="100" width="100" height="100" fill="green"></rect>
</g>
Mar.19,2021

handle it in the same way as other dom

Array.prototype.forEach.call(
  document.getElementsByClassName('g'),
  (e, i) => e.addEventListener('click', () => console.log(i))
);
Menu