查询选择器搜索直接子级

2022-08-30 04:53:13

我有一些类似jquery的函数:

function(elem) {
    return $('> someselector', elem);
};

问题是我怎么能做同样的事情?querySelector()

问题是 选择器 需要显式指定父级。有什么解决方法吗?>querySelector()


答案 1

虽然这不是一个完整的答案,但你应该关注W3C Selector API v.2,它已经在大多数浏览器(桌面和移动设备)中可用,除了IE(Edge似乎支持):请参阅完整的支持列表

function(elem) {
  return elem.querySelectorAll(':scope > someselector');
};

答案 2

你不能。没有选择器可以模拟您的起点。

jQuery这样做的方式(更多的是因为一种不符合他们喜好的行为方式),是他们检查是否有ID,如果没有,他们临时添加一个ID,然后创建一个完整的选择器字符串。qsaelem

基本上你会做的:

var sel = '> someselector';
var hadId = true;
if( !elem.id ) {
    hadID = false;
    elem.id = 'some_unique_value';
}

sel = '#' + elem.id + sel;

var result = document.querySelectorAll( sel );

if( !hadId ) {
    elem.id = '';
}

这当然不是jQuery代码,但据我所知,这基本上是他们所做的。不仅在这种情况下,而且在从嵌套元素的上下文中运行选择器的任何情况下。

Sizzle 的源代码