Doğrudan alt öğeleri almak için querySelectorAll kullanma

Bunu yapabilirim:

<div id="myDiv">
   <div class="foo"></div>
</div>

myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

Yani, myDivsınıfı olan öğenin tüm doğrudan alt öğelerini başarılı bir şekilde alabilirim .foo.

Sorun şu ki #myDiv, seçiciye şunu eklemem gerekmesi beni rahatsız ediyor , çünkü sorguyu myDivöğe üzerinde çalıştırıyorum (bu yüzden açıkça gereksizdir).

Kapalıyı bırakmam gerekir #myDiv, ancak o zaman seçici a ile başladığı için legal sözdizimi değildir >.

Seçicinin üzerinde çalıştığı öğenin doğrudan çocuklarını alan bir seçici yazmayı bilen var mı?

İyi soru. Sorulduğunda, "birleştirici köklü sorgular" yapmanın evrensel olarak uygulanan bir yolu ( John Resig'in dediği gibi ) mevcut değildi.

Şimdi : kapsam sözde sınıfı tanıtıldı. O değil desteklenen Kenardan veya IE'nin [öncesi Chrominum] sürümlerinde, ama zaten birkaç yıldır Safari tarafından desteklenmiştir. Bunu kullanarak kodunuz şöyle olabilir:

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

Bazı durumlarda .querySelectorAlldiğer eski moda DOM API özelliklerini de atlayıp kullanabileceğinizi unutmayın. Örneğin, myDiv.querySelectorAll(":scope > *")sizin yerinize myDiv.childrenörneğin yazabilirsiniz .

Henüz güvenemez Aksi takdirde :scope, ben (örn bulmak daha özel filtre mantığı eklemeden durumun üstesinden gelmek için başka bir yol düşünemiyorum myDiv.getElementsByClassName("foo")kimin .parentNode === myDivo gerçekten bir kod yolu desteklemeye çalışıyorsanız), ve açıkçası değil idealdir sadece girdi olarak keyfi bir seçici dizge ve çıktı olarak eşleşmelerin bir listesini almak istiyor! Ama benim gibi bu soruyu sadece "sahip olduğun tek şey bir çekiç" diye takılıp kaldığın için sormaya başladıysan, DOM'un sunduğu çeşitli başka araçlar da olduğunu unutma .

Seçicinin üzerinde çalıştığı öğenin doğrudan çocuklarını alan bir seçici yazmayı bilen var mı?

Geçerli öğeye "köklenmiş" bir seçici yazmanın doğru yolu kullanmaktır :scope.

var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");

Ancak, tarayıcı desteği sınırlıdır ve kullanmak istiyorsanız bir şime ihtiyacınız olacaktır. Ben inşa scopedQuerySelectorShim bu amaçla.

İşte, vanilya JS ile yazılmış, bir öğenin yalnızca doğrudan alt öğeleri üzerinde CSS seçici sorgusu çalıştırmanıza olanak tanıyan esnek bir yöntem:

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

Öğenin benzersiz olduğundan eminseniz (kimliğe sahip durumunuz gibi):

myDiv.parentElement.querySelectorAll("#myDiv > .foo");

Daha "global" bir çözüm için: (bir matchSelector şimi kullanın )

function getDirectChildren(elm, sel){
    var ret = [], i = 0, l = elm.childNodes.length;
    for (var i; i < l; ++i){
        if (elm.childNodes[i].matchesSelector(sel)){
            ret.push(elm.childNodes[i]);
        }
    }
    return ret;
}

elmAna öğeniz nerede ve selsizin seçiciniz. Tamamen bir prototip olarak da kullanılabilir.

Aşağıdaki çözüm şimdiye kadar önerilenlerden farklı ve benim için çalışıyor.

Gerekçe, önce eşleşen tüm çocukları seçmeniz ve ardından doğrudan çocuk olmayanları filtrelemenizdir. Bir çocuk, aynı seçiciye sahip eşleşen bir ebeveyne sahip değilse, doğrudan çocuktur.

function queryDirectChildren(parent, selector) {
    const nodes = parent.querySelectorAll(selector);
    const filteredNodes = [].slice.call(nodes).filter(n => 
        n.parentNode.closest(selector) === parent.closest(selector)
    );
    return filteredNodes;
}

HTH!

Bu durumu ele almak için bir fonksiyon yarattım, paylaşacağımı düşündüm.

getDirectDecendent(elem, selector, all){
    const tempID = randomString(10) //use your randomString function here.
    elem.dataset.tempid = tempID;

    let returnObj;
    if(all)
        returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
    else
        returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);

    elem.dataset.tempid = '';
    return returnObj;
}

Temelde yaptığınız şey bir rastgele dizge oluşturmaktır (burada randomString işlevi içe aktarılmış bir npm modülüdür, ancak kendinizinkini yapabilirsiniz.) Ve ardından seçicide beklediğiniz öğeyi elde etmenizi garantilemek için bu rastgele dizeyi kullanmaktır. O zaman bundan >sonrasını kullanmakta özgürsünüz .

İd özniteliğini kullanmamamın nedeni, id özniteliğinin zaten kullanılmış olması ve bunu geçersiz kılmak istemiyorum.

Bir öğenin tüm doğrudan çocuklarını kullanarak kolayca elde edebiliriz childNodesve belirli bir sınıfa sahip ataları seçebiliriz querySelectorAll, bu yüzden ikisini birden alıp ikisini karşılaştıran yeni bir işlev yaratabileceğimizi hayal etmek zor değil.

HTMLElement.prototype.queryDirectChildren = function(selector){
  var direct = [].slice.call(this.directNodes || []); // Cast to Array
  var queried = [].slice.call(this.querySelectorAll(selector) || []); // Cast to Array
  var both = [];
  // I choose to loop through the direct children because it is guaranteed to be smaller
  for(var i=0; i<direct.length; i++){
    if(queried.indexOf(direct[i])){
      both.push(direct[i]);
    }
  }
  return both;
}

Not: Bu bir NodeList değil, bir Node Dizisi döndürecektir.

kullanım

 document.getElementById("myDiv").queryDirectChildren(".foo");

Sadece geçerli düğüme geçici bir öznitelik atayarak : kapsamının uyumluluğunu genişletebileceğinizi eklemek isterim .

let node = [...];
let result;

node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");

İle gitmiştim

var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;

Bunu denemeden bile yapıyorum. Bu işe yarar mı?

myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");

Bir deneyin, belki işe yarayabilir belki de. Apolovies, ama şu anda denemek için bilgisayar başında değilim (iPhone'umdan yanıt veriyor).