I have a DOM structure like this:
<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>
In this example, I have a class .thing that has a .title and .content. The contents of .content may be another .thing. The issue I'm having is that given an arbitrary .thing, I want to be able to query its .content and .title without querying anything inside of .content.
One way to do this would be to query the child directly, e.g.
const thing = ... // get some .thing
const title = thing.querySelector(':scope > .title')
The issue with this is that I want to be able to insert an arbitrary number of elements in between .thing and .title. One idea I had was to use the :not pseudo-class:
const title = thing.querySelector('.title:not(.content *)').
The theory behind this is that I want a title that isn't a child of content. This works for the top-level title, but doesn't work for nested things. What's the best way to query for this?
give a data-attribute to the content you specifically want to grab.
Example:
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>