Javascript querySelector为h1和p+选择最接近的父对象；p元素-可能吗？

编辑 结构未知-它应该适用于任何新闻站点，其中有一个容器/包装器，包含h1和p+p（与该页面的主要文章相关的所有内容）

我想要的也可以通过

let story = document.querySelector('p+p').parentElement;
while(!story.querySelector('h1')){
    story = story.parentElement;
}
console.log(story);

但我想知道是否有更好的解决办法？ 每一篇新闻文章都有h1标签和带有文本的段落。我想知道是否有可能编写一个querySelector，它将选择包含h1和p+p的最近的父元素/容器元素。诀窍是它应该适用于任何新闻网站

---

当我写作时

document.body.querySelector('* h1')

document.body.querySelector('* p+p').parentElement

我可以得到h1容器，但是根据HTML5，页面上可能有多个h1标签

我知道querySelectorAll，但这对我的情况没有帮助

---

当我写作时

document.body.querySelector('* h1')

document.body.querySelector('* p+p').parentElement

我可以用文本段落获取文章正文的容器

---

我的问题是，是否可以将这两个示例合并到一个查询中？（不带循环和多个查询） 类似于

document.body.querySelector('* ~ h1 ~ p+p')
document.body.querySelector('* h1 p+p')

---

…但是可行我创建了一个jQuery解决方案

堆栈片段

$（'.block'）。每个（函数（e）{
if（$（this）.find（'h4'）。长度>0&$（this）.find（'p+p'）。长度>0）{
console.log（'block'+（e+1））
}
});
正文{
字体：13px Verdana；
}

标题
帕拉1

帕拉2

标题
帕拉1

标题
帕拉1

帕拉2

我创建了一个jQuery解决方案

堆栈片段


$（'.block'）。每个（函数（e）{
if（$（this）.find（'h4'）。长度>0&$（this）.find（'p+p'）。长度>0）{
console.log（'block'+（e+1））
}
});
正文{
字体：13px Verdana；
}

标题
帕拉1

帕拉2

标题
帕拉1

标题
帕拉1

帕拉2

根据您提供的网站，只需使用子级和兄弟级选择器即可。以下步骤将起作用：

window.document.querySelector("*>h1, * p+p").parentNode

它选择具有h1的所有图元和具有多个p标记的所有图元。我在您提供的页面上尝试了它，结果与您的JS代码相同

由于您没有指定jquery，所以我给您提供了一个JavaScript解决方案。目前没有父选择器或查询选择器，因此parentNode是最接近的。最后，您的原始解决方案指定了文章（而不是像页面那样的div）。如果您需要，只需将div替换为article。
基于您提供的网站，只需使用子级和兄弟级选择器。以下步骤将起作用：

window.document.querySelector("*>h1, * p+p").parentNode

它选择具有h1的所有图元和具有多个p标记的所有图元。我在您提供的页面上尝试了它，结果与您的JS代码相同

由于您没有指定jquery，所以我给您提供了一个JavaScript解决方案。目前没有父选择器或查询选择器，因此parentNode是最接近的。最后，您的原始解决方案指定了文章（而不是像页面那样的div）。如果您想要那个，只需将div替换为article

我的问题是，是否可以将这两个示例合并到一个查询中

tl；医生：不，不是。当然不是今天，也可能不是很快。如果你对实际答案以外的任何东西都不感兴趣，这就是你需要知道的全部；本段后面的内容都是与标准中尚不存在的功能相关的背景信息


这取决于“单个查询”的含义。你是说“一次任务”吗？如果是这样的话，计划标准化的
：has（）
伪类将极大地帮助：

// In jQuery: $('p+p').closest(':has(h1)')
let story = document.querySelector('p+p').closest(':has(h1)');

但是请注意，它是与一起使用的，而且，
：has（）
本机还不受支持，近期内也没有计划在任何浏览器中实现它。因此，如果jQuery不是一个选项，那么您所拥有的就是长期以来最好的

如果“单个查询”的意思是“单个选择器”，那么答案是否定的，因为不可能编写与两个或多个子体的最接近的共同祖先匹配的选择器。最接近的将是
：has（h1）：has（p+p）
，但这将匹配每一个这样的祖先，从最内层开始，一直到根元素。没有选择器只匹配最里面的一个

我的问题是，是否可以将这两个示例合并到一个查询中

tl；医生：不，不是。当然不是今天，也可能不是很快。如果你对实际答案以外的任何东西都不感兴趣，这就是你需要知道的全部；本段后面的内容都是与标准中尚不存在的功能相关的背景信息


这取决于“单个查询”的含义。你是说“一次任务”吗？如果是这样的话，计划标准化的
：has（）
伪类将极大地帮助：

// In jQuery: $('p+p').closest(':has(h1)')
let story = document.querySelector('p+p').closest(':has(h1)');

但是请注意，它是与一起使用的，而且，
：has（）
本机还不受支持，近期内也没有计划在任何浏览器中实现它。因此，如果jQuery不是一个选项，那么您所拥有的就是长期以来最好的

如果“单个查询”的意思是“单个选择器”，那么答案是否定的，因为不可能编写与两个或多个子体的最接近的共同祖先匹配的选择器。最接近的将是
：has（h1）：has（p+p）
，但这将匹配每一个这样的祖先，从最内层开始，一直到根元素。没有选择器可以只匹配最里面的部分。
您有没有看过，您没有为此标记jQuery。jQuery解决方案行吗？我现在更喜欢远离jQuery，但如果有jQuery解决方案，也许可以以某种方式将其移植到vanillaJS？元素#nestest（）在我的情况下不起作用，或者我正在这样做