let gList = document.querySelectorAll('g');
for(var i = 0; i < gList.length; i++) {
  gList[i].style.opacity = 0;
}

Can’t you just add g to the query selector?

useEffect(() => {
  var svg = document.querySelector('svg')
  var elms = svg.querySelectorAll(`g:not([id^='tooth-${props.toothnumber}'])`)
  elms.forEach((element) => element.style.opacity = 0)
}, [props.toothnumber])

I have a list of elements from a querySelectorAll call and i want to set all the elements that are <g> tags to have opacity 0. Im unsure how an if statement like this would work though.

  useEffect(() => {
    var elements = document.querySelectorAll(`[id^='tooth-${props.toothnumber}']`);
    var svg = document.querySelector('svg')
    console.log(svg)
    var elms = svg.querySelectorAll(`:not([id^='tooth-${props.toothnumber}'])`)
    for(var i = 0; i < elms.length; i++) {
        if (elems[i] is a g tag) {
            elms[i].style.opacity = 0
        }
        
    }
  }, [props.toothnumber])

Any Advice