querySelector 직계 자식 검색

jquery와 같은 기능이 있습니다.

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

문제는 어떻게 똑같이 할 수 querySelector()있습니까?

문제는 >선택기에서 querySelector()부모를 명시 적으로 지정해야한다는 것입니다. 해결 방법이 있습니까?

완전한 답은 아니지만 대부분의 브라우저, 즉 IE (Edge가 지원하는 것 같음)를 제외한 대부분의 브라우저에서 이미 사용 가능한 W3C Selector API v.2 를 주시해야 합니다 . 전체 지원 목록 참조 .

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

당신은 할 수 없습니다. 시작점을 시뮬레이트하는 선택기가 없습니다.

jQuery가이를 수행하는 방식 ( qsa자신이 좋아하지 않는 방식으로 작동 하기 때문에 ) elem은 ID가 있는지 확인 하고 그렇지 않은 경우 일시적으로 ID를 추가 한 다음 전체 선택기 문자열을 생성하는 것입니다.

기본적으로 다음을 수행합니다.

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의 소스 코드

완료 : 범위 폴리 필

으로 avetisk가 있다 언급 선택자 API를이 개 용도 :scope를 의사-선택합니다.
지원하는 모든 브라우저에서이 작업을 수행하려면 querySelector여기에 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);

용법

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

역사적 이유로 이전 솔루션은

모든 답변을 바탕으로

// 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);
    }
};

용법

elem.find('> a');

찾고있는 요소의 태그 이름을 알고있는 경우 선택기에서이를 사용하여 원하는 것을 얻을 수 있습니다.

예를 들어 당신이있는 경우 <select>가 그 <option>들과 <optgroups>, 그리고 당신은 단지 원하는 <option>그 직접적인 아이, 내부가 아닌 것들들 <optgoups>:

<select>
  <option>iPhone</option>
  <optgroup>
    <option>Nokia</option>
    <option>Blackberry</option>
  </optgroup>
</select>

따라서 select 요소에 대한 참조가 있으면 놀랍게도 다음과 같이 직계 자식을 가져올 수 있습니다.

selectElement.querySelectorAll('select > option')

Chrome, Safari 및 Firefox에서 작동하는 것처럼 보이지만 IE에서는 테스트하지 않았습니다. = /

결국 직계 자식을 찾고 싶다면 (예를 들어가 아니라) Element.matches ()> div > span 시도해 볼 수 있습니다 .

const elems = Array.from(elem.children).filter(e => e.matches('.my-class'))

청구

개인적으로 나는 patrick dw의 대답을 취하고 그의 대답을 +1하면 내 대답은 대체 솔루션을 찾는 것입니다. 나는 그것이 반대표를받을 가치가 없다고 생각합니다.

내 시도는 다음과 같습니다.

function q(elem){
    var nodes = elem.querySelectorAll('someSeletor');
    console.log(nodes);
    for(var i = 0; i < nodes.length; i++){
        if(nodes[i].parentNode === elem) return nodes[i];
    }
}

http://jsfiddle.net/Lgaw5/8/ 참조

그것은 나를 위해 일했습니다.

Node.prototype.search = function(selector)
{
    if (selector.indexOf('@this') != -1)
    {
        if (!this.id)
            this.id = "ID" + new Date().getTime(); 
        while (selector.indexOf('@this') != -1)
            selector = selector.replace('@this', '#' + this.id);
        return document.querySelectorAll(selector);
    } else 
        return this.querySelectorAll(selector);
};

직계 자식을 검색하려면> 앞에 @this 키 워크를 전달해야합니다.

다음은 직계 하위 항목에 대해서만 CSS 선택기 쿼리를 실행하는 단순하고 일반적인 방법입니다. 또한 다음과 같이 결합 된 쿼리를 처리합니다 "foo[bar], baz.boo".

var count = 0;
function queryChildren(element, selector) {
  var id = element.id,
      guid = element.id = id || 'query_children_' + count++,
      attr = '#' + guid + ' > ',
      selector = attr + (selector + '').replace(',', ',' + attr, 'g');
  var result = element.parentNode.querySelectorAll(selector);
  if (!id) element.removeAttribute('id');
  return result;
}


*** Example Use ***

queryChildren(someElement, '.foo, .bar[xyz="123"]');

query-selector 를 매우 편리하게 대체 할 수 있는 query-relative lib가 있습니다. 자식 선택자 와 (IE8 포함)을 폴리 필하고 선택자를 정규화 합니다. 또한 그것은 같은 특별한 상대 pseudos을 제공 , , , , 단지의 경우.'> *':scope:root:closest:parent:prev:next

요소에 ID가 있는지 확인하고 그렇지 않으면 임의의 ID를 추가하고이를 기반으로 검색합니다.

function(elem) {
      if(!elem.id)
          elem.id = Math.random().toString(36).substr(2, 10);
      return elem.querySelectorAll(elem.id + ' > someselector');
    };

같은 일을 할 것입니다

$("> someselector",$(elem))