querySelector搜索立即的孩子 [英] querySelector search immediate children

问题描述

我有一些类似jquery的函数：

  function（elem）{
 return $（'>元素
};问题是我如何做同样的 querySelector（）
 
 
      c>  需要显式指定父项。是否有解决方法？
解决方案
 
完成：scope polyfill 
 
 
 
  avetisk 已提及选择器API 2使用：scope 伪选择器。
 
要使此工作在所有浏览器（支持 querySelector ）这里是polyfill 
 （function（doc，proto）{
 try {检查浏览器是否支持：scope本地
 doc.querySelector（'：scope body'）; 
} catch（err）{// polyfill本地方法如果不
 ['querySelector' ，'querySelectorAll']。forEach（function（method）{
 var nativ = proto [method]; 
 proto [method] = function（selectors）{
 if（/ ）\s *：scope / .test（selectors））{//只有当选择器包含：scope 
 var id = this.id; //记住当前元素ID 
 this.id ='ID_ '+ Date.now（）; //分配新的唯一ID 
 selectors = selectors.replace（/（（^ |，）\s *）：scope / g，'$ 1＃'+ this.id） ; // replace：scope with #ID 
 var result = doc [method]（selectors）; 
 this.id = id; // restore previous id 
 return result; 
} else {
 return nativ.call（this，selectors）; //为其他选择器使用本地代码
} 
} 
}）; 
} 
}）（window.document，Element.prototype）; 
  
 
 
 
使用
 
 
 
  node.querySelector（'：scope> someselector'）; 
 node.querySelectorAll（'：scope> someselector'）; 
 
 
 
 
 
 
 
由于历史原因，我以前的解决方案
 
 
 
基于所有答案
 原型扩展
 Node.prototype.find = function（selector）{
 if（/(^\s*|,\s*)>/.test(selector））{
 if（！this.id）{
 this.id ='ID_'+ new Date（）。getTime（）; 
 var removeId = true; 
} 
 selector = selector.replace（/（^ \s * |，\s *）> / g，'$ 1＃'+ this.id +'>'）; 
 var result = document.querySelectorAll（selector）; 
 if（removeId）{
 this.id = null; 
} 
 return result; 
} else {
 return this.querySelectorAll（selector）; 
} 
}; 
  
 使用 
  elem.find（'> a'）; 
  
 
I have some jquery-like function:
function(elem) {
    return $('> someselector', elem);
};
The question is how can i do the same with querySelector()?

The problem is > selector in querySelector() requires parent to be explicitly specified. Is there any workaround?
解决方案
Complete :scope polyfill

As avetisk has mentioned Selectors API 2 uses :scope pseudo-selector.

To make this work in all browsers (that support querySelector) here is the polyfill
(function(doc, proto) {
  try { // check if browser supports :scope natively
    doc.querySelector(':scope body');
  } catch (err) { // polyfill native methods if it doesn't
    ['querySelector', 'querySelectorAll'].forEach(function(method) {
      var nativ = proto[method];
      proto[method] = function(selectors) {
        if (/(^|,)\s*:scope/.test(selectors)) { // only if selectors contains :scope
          var id = this.id; // remember current element id
          this.id = 'ID_' + Date.now(); // assign new unique id
          selectors = selectors.replace(/((^|,)\s*):scope/g, '$1#' + this.id); // replace :scope with #ID
          var result = doc[method](selectors);
          this.id = id; // restore previous id
          return result;
        } else {
          return nativ.call(this, selectors); // use native code for other selectors
        }
      }
    });
  }
})(window.document, Element.prototype);


Usage

node.querySelector(':scope > someselector');
node.querySelectorAll(':scope > someselector');




For historical reasons, my previous solution

Based on all answers
// Caution! Prototype extending
Node.prototype.find = function(selector) {
    if (/(^\s*|,\s*)>/.test(selector)) {
        if (!this.id) {
            this.id = 'ID_' + new Date().getTime();
            var removeId = true;
        }
        selector = selector.replace(/(^\s*|,\s*)>/g, '$1#' + this.id + ' >');
        var result = document.querySelectorAll(selector);
        if (removeId) {
            this.id = null;
        }
        return result;
    } else {
        return this.querySelectorAll(selector);
    }
};
Usage
elem.find('> a');


                        
这篇关于querySelector搜索立即的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！