ใช้ querySelectorAll เพื่อดึงข้อมูลลูกโดยตรง

ฉันสามารถทำได้:

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

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

นั่นคือฉันสามารถดึงข้อมูลลูกโดยตรงทั้งหมดของmyDivองค์ประกอบที่มีคลาสได้.fooสำเร็จ

ปัญหาคือมันรบกวนฉันที่ฉันต้องรวม#myDivตัวเลือกไว้ในตัวเลือกเนื่องจากฉันกำลังเรียกใช้การสืบค้นในmyDivองค์ประกอบ (ดังนั้นจึงเห็นได้ชัดว่าซ้ำซ้อน)

ฉันควรจะสามารถออกจากระบบได้#myDivแต่ตัวเลือกนั้นไม่ใช่ไวยากรณ์ทางกฎหมายเนื่องจากเริ่มต้นด้วยไฟล์>.

ไม่มีใครรู้วิธีเขียนตัวเลือกที่ได้รับเฉพาะลูกโดยตรงขององค์ประกอบที่ตัวเลือกทำงานอยู่

คำถามที่ดี. ในขณะที่ถูกถามไม่มีวิธีที่ใช้กันอย่างแพร่หลายในการทำ "combinator rooted queries" (ตามที่John Resig เรียกมันว่า )

ตอนนี้: ขอบเขตหลอกคลาสได้รับการแนะนำ ไม่รองรับ Edge หรือ IE เวอร์ชัน [pre-Chrominum] แต่ Safari ได้รับการสนับสนุนมาสองสามปีแล้ว เมื่อใช้รหัสนั้นรหัสของคุณอาจกลายเป็น:

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

โปรดทราบว่าในบางกรณีคุณสามารถข้าม.querySelectorAllและใช้คุณลักษณะ DOM API ที่ล้าสมัยอื่น ๆ ได้เช่นกัน ตัวอย่างเช่นแทนที่จะmyDiv.querySelectorAll(":scope > *")เขียนmyDiv.childrenก็ได้เช่น

มิฉะนั้นหากคุณยังพึ่งพาไม่ได้:scopeฉันไม่สามารถคิดวิธีอื่นในการจัดการกับสถานการณ์ของคุณได้โดยไม่ต้องเพิ่มตรรกะตัวกรองที่กำหนดเอง (เช่นค้นหาว่าmyDiv.getElementsByClassName("foo")ใคร.parentNode === myDiv) และแน่นอนว่าไม่เหมาะอย่างยิ่งหากคุณกำลังพยายามสนับสนุนเส้นทางรหัสเดียวที่เป็นจริง เพียงแค่ต้องการใช้สตริงตัวเลือกโดยพลการเป็นอินพุตและรายการการแข่งขันเป็นเอาต์พุต! แต่ถ้าชอบฉันคุณก็ถามคำถามนี้เพียงเพราะคุณคิดว่า "สิ่งที่คุณมีคือค้อน" อย่าลืมว่ามีเครื่องมืออื่น ๆ อีกมากมายที่ DOM นำเสนอเช่นกัน

ไม่มีใครรู้วิธีเขียนตัวเลือกที่ได้รับเฉพาะลูกโดยตรงขององค์ประกอบที่ตัวเลือกทำงานอยู่

วิธีที่ถูกต้องในการเขียนเลือกที่ "ฝังราก" :scopeเพื่อองค์ประกอบปัจจุบันคือการใช้งาน

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

อย่างไรก็ตาม การรองรับเบราว์เซอร์มีข้อ จำกัดและคุณจะต้องใช้ shim หากต้องการใช้งาน ฉันสร้างscopedQuerySelectorShimเพื่อจุดประสงค์นี้

ต่อไปนี้เป็นวิธีการที่ยืดหยุ่นซึ่งเขียนด้วย vanilla JS ซึ่งช่วยให้คุณสามารถรันคิวรีตัวเลือก CSS เฉพาะลูกโดยตรงขององค์ประกอบ:

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

หากคุณแน่ใจว่าองค์ประกอบนั้นไม่ซ้ำกัน (เช่นกรณีของคุณที่มี ID):

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

สำหรับโซลูชัน "ทั่วโลก" เพิ่มเติม: (ใช้ตัวเลือกmatchSelector )

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

elmองค์ประกอบหลักของคุณอยู่ที่ไหนและselเป็นตัวเลือกของคุณ สามารถใช้เป็นต้นแบบได้โดยสิ้นเชิง

วิธีแก้ปัญหาต่อไปนี้แตกต่างจากที่เสนอจนถึงตอนนี้และใช้ได้กับฉัน

เหตุผลคือคุณต้องเลือกเด็กที่ตรงกันทั้งหมดก่อนจากนั้นกรองเด็กที่ไม่ใช่ลูกโดยตรงออก เด็กเป็นลูกโดยตรงหากไม่มีผู้ปกครองที่ตรงกันกับตัวเลือกเดียวกัน

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!

ฉันสร้างฟังก์ชันเพื่อจัดการสถานการณ์นี้คิดว่าจะแบ่งปัน

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

โดยพื้นฐานแล้วสิ่งที่คุณกำลังทำคือการสร้างสตริงแบบสุ่ม (ฟังก์ชัน randomString ในที่นี้คือโมดูล npm ที่นำเข้า แต่คุณสามารถสร้างขึ้นเองได้) จากนั้นใช้สตริงแบบสุ่มเพื่อรับประกันว่าคุณจะได้รับองค์ประกอบที่คุณคาดหวังในตัวเลือก จากนั้นคุณมีอิสระที่จะใช้>หลังจากนั้น

เหตุผลที่ฉันไม่ใช้แอตทริบิวต์ id คือแอตทริบิวต์ id อาจถูกใช้ไปแล้วและฉันไม่ต้องการแทนที่สิ่งนั้น

เราสามารถรับลูกโดยตรงทั้งหมดขององค์ประกอบโดยใช้childNodesและเราสามารถเลือกบรรพบุรุษที่มีคลาสเฉพาะได้ด้วยquerySelectorAllดังนั้นจึงไม่ยากที่จะจินตนาการว่าเราสามารถสร้างฟังก์ชันใหม่ที่ได้รับทั้งสองและเปรียบเทียบทั้งสอง

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

หมายเหตุ: สิ่งนี้จะส่งคืน Array of Nodes ไม่ใช่ NodeList

การใช้

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

ฉันต้องการเพิ่มว่าคุณสามารถขยายความเข้ากันได้ของ: ขอบเขตโดยกำหนดแอตทริบิวต์ชั่วคราวให้กับโหนดปัจจุบัน

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

ฉันจะไปด้วย

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

ฉันแค่ทำสิ่งนี้โดยไม่ได้ลองเลย จะได้ผลไหม

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

ลองดูสิบางทีมันอาจจะใช้งานไม่ได้ Apolovies แต่ตอนนี้ฉันไม่ได้ใช้คอมพิวเตอร์เพื่อลองใช้งาน (ตอบสนองจาก iPhone ของฉัน)