查询递归DOM结构中的特定子节点

Question

我有一个这样的DOM结构:

<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>

在这个例子中，我有一个类.thing，它有一个.title和.content。.content的内容可能是另一个.thing。我遇到的问题是，给定任意.thing，我希望能够查询其.content和.title，而不查询.content内部的任何内容。

一种方法是直接查询子节点，例如

const thing = ... // get some .thing
const title = thing.querySelector(':scope > .title')

问题在于，我希望能够在.thing和.title之间插入任意数量的元素。我的一个想法是使用:not伪类:

const title = thing.querySelector('.title:not(.content *)'). 

背后的理论是，我想要一个标题，不是内容的孩子。这适用于顶级标题，但不适用于嵌套的内容。最好的查询方式是什么?

Answer 1

给你想要抓取的内容一个data-attribute。

的例子:

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>