查询选择器搜索直接子级

javascript css-selectors selectors-api

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 的源代码