Question

正如我在主题中写的那样 - 我正在寻找一个jQuery：has（）选择器等效使用document.querySelector。

例如，我想选择包含链接的所有段落：

使用jQuery会很简单：

$("p:has(a)")

如何使用javascript的document.querySelector？

实现这一目标

提前致谢。

Answer 1

在vanilla JS中的:has('selector')等价物基本上是jQuery扩展中的内容：匹配选择器，然后过滤掉不为子选择器返回匹配的元素：

[].filter.call( document.querySelectorAll('p'), function( elem ){
   return elem.querySelector('a')
});

或更通用的功能：

var querySelectorHas = function( parent, child ){
   return [].filter.call( document.querySelectorAll( parent ), function( elem ){
       return elem.querySelector( child )
   });
}

http://jsfiddle.net/jer5xde5/

Answer 2

如jquery documentation

中所述

因为：has（）是一个jQuery扩展而不是CSS的一部分规范，查询使用：has（）无法利用本机DOM querySelectorAll（）方法提供的性能提升

没有原生等价物。

Answer 3

Javascript中没有等效的:has()。如果您愿意，可以手动childNode。

使用childNode，您需要使用循环手动迭代它。

jQuery：has（）等效使用document.querySelector

3 个答案: