एक DOM संग्रह

Question

पर `querySelectorAll` का उपयोग करके बाल चयनकर्ता मान लें कि आपको नेस्टेड बाल सूचियों के साथ एक सूची मिली है।

<ul> 
    <li></li> 
    <li> 
     <ul> 
      <li></li> 
      <li></li> 
     </ul> 
    </li> 
    <li></li> 
</ul> 

और document.querySelectorAll() का उपयोग चयन करने के लिए:

var ul = document.querySelectorAll("ul"); 

मैं कैसे ul संग्रह का उपयोग प्रत्यक्ष बच्चे तत्वों प्राप्त करने के लिए कर सकते हैं?

ul.querySelectorAll("> li"); 
// Gives 'Error: An invalid or illegal string was specified' 

के अनुमान ul किसी भी तरह से कैश की गई (अन्यथा मैं ul > li सीधे किया जा सकता है) कर रहा है।

jQuery में यह काम करता है:

$("ul").find("> li"); 

लेकिन यह देशी querySelectorAll में नहीं है। कोई समाधान?

Answer 1

क्योंकि ul लौटाया गया एक नोडलिस्ट है, यह एक jQuery संग्रह की तरह इसकी सामग्री पर स्पष्ट रूप से लूप नहीं करता है। आपको ul[0].querySelectorAll() का उपयोग करने की आवश्यकता होगी या ulquerySelector() के साथ अभी भी बेहतर चुनें।

इसके अलावा, querySelectorAll()> नहीं लेगा और इसके वर्तमान संदर्भ से कार्य नहीं करेगा। हालांकि, अगर आप यह lazd's answer का उपयोग कर काम करने के लिए प्राप्त कर सकते हैं (हालांकि ब्राउज़र संगतता जांचें), या इन समाधानों (कोई ब्राउज़र मुद्दे हैं चाहिए) के किसी भी ...

[].filter.call(ul.querySelectorAll("li"), function(element){ 
    return element.parentNode == ul; 
}); 

jsFiddle।

यह आपके li तत्वों का चयन करेगा जो आपके ul के वंशज हैं, और फिर उन लोगों को हटा दें जो प्रत्यक्ष वंशज नहीं हैं।

वैकल्पिक रूप से, आप सभी childNodes मिल सकता है और उसके बाद उन्हें फ़िल्टर ...

[].filter.call(ul.childNodes, function(node) { 
    return node.nodeType == 1 && node.tagName.toLowerCase() == 'li'; 
}); 

jsFiddle।

Answer 2

आपको NodeList पर document.querySelectorAll() पर लौटने की आवश्यकता है और फिर उस सूची में प्रत्येक तत्व के लिए element.querySelectorAll() पर कॉल करें।

Answer 3

वर्तमान तत्व को "रूट" करने वाले चयनकर्ता को लिखने का सही तरीका :scope का उपयोग करना है। https://stackoverflow.com/a/21126966/1170723