Tengo una estructura DOM como esta:
<div class="thing"> <div class="title"></div> <div class="content"> <div class="thing"> <div class="title"></div> <div class="content"> <!-- More .thing may be here--> </div> </div> </div> </div> En este ejemplo, tengo una clase .thing que tiene .title y .content . El contenido de .content puede ser otra .thing . El problema que tengo es que dado un .thing arbitrario, quiero poder consultar su .content y .title sin consultar nada dentro de .content .
Una forma de hacer esto sería consultar al niño directamente, por ejemplo
const thing = ... // get some .thing const title = thing.querySelector(':scope > .title') El problema con esto es que quiero poder insertar un número arbitrario de elementos entre .thing y .title . Una idea que tuve fue usar :not pseudo-class:
const title = thing.querySelector('.title:not(.content *)').La teoría detrás de esto es que quiero un título que no sea hijo del contenido. Esto funciona para el título de nivel superior, pero no funciona para elementos anidados. ¿Cuál es la mejor manera de consultar esto?
asigne un atributo de datos al contenido que desea capturar específicamente.
Ejemplo:
const div = document.querySelector("[data-getter='title']"); console.log(div); [data-getter="title"] { background-color: orange; } <div> <div data-getter="title"> <p>random text</p> </div> <div>2nd text</div> </div>