Tengo una construcción formada por varios componentes <div> y <input> anidados.

Cuando me enfoco en una de las entradas, me gustaría cambiar el color de fondo del primer elemento en la jerarquía que tiene la note de clase.

El siguiente código muestra la idea general, pero solo funciona para el primer elemento (principal) sobre la entrada enfocada.

 document.addEventListener('focusin', (event) => changeFocusColor(event)) const changeFocusColor = (event) => { // here comes the computation of the element to do ...style.BackgroundColor = ... on event.target.parentElement.style.backgroundColor = 'yellow' }

 <div> <div class="note"> <input />first level <div> <input />second level <input />second level </div> </div> <div>hello</div> </div>

¿Hay una forma limpia de decir "sube en el árbol DOM hasta que encuentres un elemento con la note de clase y le apliques un estilo" ?

La forma en que planeo hacerlo es iterar sobre element.path y verificar su classList hasta que encuentre una note allí, y luego aplicar style.background en ese elemento.