querySelector tìm kiếm trẻ em ngay lập tức

Tôi có một số chức năng giống như jquery:

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

Câu hỏi là làm thế nào tôi có thể làm điều tương tự với querySelector()?

Vấn đề là >bộ chọn trong querySelector()yêu cầu cha mẹ phải được chỉ định rõ ràng. Có bất kỳ công việc xung quanh?

Mặc dù đây không phải là câu trả lời đầy đủ, nhưng bạn nên theo dõi API W3C Selector v.2 đã có sẵn trong hầu hết các trình duyệt, cả máy tính để bàn và thiết bị di động, ngoại trừ IE (Edge có vẻ hỗ trợ): xem danh sách hỗ trợ đầy đủ .

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

Bạn không thể. Không có bộ chọn nào mô phỏng điểm bắt đầu của bạn.

Cách jQuery làm điều đó (nhiều hơn do cách qsacư xử không theo ý họ), đó là họ kiểm tra xem elemcó ID hay không, và nếu không, họ tạm thời thêm ID, sau đó tạo một chuỗi bộ chọn đầy đủ.

Về cơ bản bạn sẽ làm:

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 = '';
}

Đây chắc chắn không phải là mã jQuery, nhưng theo những gì tôi nhớ, về cơ bản nó là những gì họ làm. Không chỉ trong tình huống này, mà trong bất kỳ tình huống nào bạn đang chạy một bộ chọn từ ngữ cảnh của một phần tử lồng nhau.

Mã nguồn cho Sizzle

Hoàn thành: polyfill phạm vi

Như avetisk đã đề cập Bộ chọn API 2 sử dụng :scopebộ chọn giả.
Để làm cho điều này hoạt động trong tất cả các trình duyệt (hỗ trợ querySelector), đây là 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);

Sử dụng

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

Vì lý do lịch sử, giải pháp trước đây của tôi

Dựa trên tất cả các câu trả lời

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

Sử dụng

elem.find('> a');

Nếu bạn biết tên thẻ của phần tử bạn đang xem xét, thì bạn có thể sử dụng nó trong bộ chọn để đạt được những gì bạn muốn.

Ví dụ: nếu bạn có một <select>cái có <option>s và <optgroups>và bạn chỉ muốn những <option>cái là con của nó, không phải những cái bên trong <optgoups>:

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

Vì vậy, khi có tham chiếu đến phần tử select, bạn có thể - đáng ngạc nhiên là - có được phần tử con ngay lập tức của nó như thế này:

selectElement.querySelectorAll('select > option')

Nó dường như hoạt động trong Chrome, Safari và Firefox, nhưng không thử nghiệm trong IEs. = /

Nếu cuối cùng bạn muốn tìm các con trực tiếp (chứ không phải ví dụ > div > span), bạn có thể thử Element.matches () :

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

YÊU CẦU

Cá nhân tôi sẽ lấy câu trả lời từ Patrick dw và +1 câu trả lời của anh ấy, câu trả lời của tôi là để tìm kiếm giải pháp thay thế. Tôi không nghĩ rằng nó xứng đáng nhận được sự ủng hộ.

Đây là nỗ lực của tôi:

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];
    }
}

xem http://jsfiddle.net/Lgaw5/8/

Điều đó đã làm việc cho tôi:

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

bạn sẽ phải vượt qua keywork @this trước> khi bạn muốn tìm kiếm những đứa trẻ ngay lập tức.

Sau đây là một phương pháp đơn giản, chung chung để chạy bất kỳ truy vấn bộ chọn CSS nào trên chỉ con trực tiếp - nó cũng tính đến các truy vấn kết hợp, như "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"]');

Có một lib tương đối truy vấn , thay thế khá tiện dụng cho công cụ chọn truy vấn . Nó làm đầy bộ chọn trẻ em '> *'và :scope(bao gồm IE8), cũng như chuẩn hóa :rootbộ chọn. Ngoài ra nó cung cấp một số pseudos tương đối đặc biệt như :closest, :parent, :prev, :next, chỉ trong trường hợp.

kiểm tra xem phần tử có id hay không, hãy thêm id ngẫu nhiên và thực hiện tìm kiếm dựa trên nó

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

sẽ làm điều tương tự như

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