querySelectorAll एक फ़ंक्शन नहीं है

Question

मैं var लेख में सभी टिप्पणियों को ढूंढने की कोशिश कर रहा हूं, लेकिन कंसोल में रिटर्न संदेश कहता है कि "querySelectorAll" कोई फ़ंक्शन नहीं है। मुझे यह त्रुटि क्यों मिलती है?

<article class="first">  
    <div class="feature parts"> 
    <div class="oferts"> 
     <div class="heart icons"></div> 
     <h1>Build with passion</h1> 
    </div> 
    </div> 
</article> 

यह मेरा जावास्क्रिप्ट है:

यह मेरी HTML है

var articleFirst = document.querySelectorAll("article.first"); 
var oferts = articleFirst.querySelectorAll(".oferts"); 

त्रुटि:

Uncaught TypeError: articleFirst.querySelectorAll is not a function

Answer 1

ऐसा करते हैं की कोशिश:

var articleFirst = document.querySelectorAll("article.first"); 
console.log(articleFirst) 
var oferts = articleFirst[0].querySelectorAll(".oferts"); 
console.log(oferts) 

सांत्वना के साथ आप देख सकते हैं क्या हो रहा है।

या बस ऐसा करते हैं:

document.querySelectorAll("article.first .oferts"); 

Answer 2

querySelectorAll एक विधि डोम में तत्व और दस्तावेज नोड्स पर पाया जाता है ।

आप इसे कॉल के वापसी मूल्य पर querySelectorAll पर कॉल करने का प्रयास कर रहे हैं जो एक नोड सूची (जो ऑब्जेक्ट की तरह सरणी है) देता है। आपको नोड सूची पर लूप करना होगा और बदले में प्रत्येक नोड पर querySelector पर कॉल करना होगा।

वैकल्पिक रूप से, बस इसके प्रारंभिक कॉल में एक वंशज संयोजन का उपयोग करें।

var oferts = document.querySelectorAll("article.first .oferts"); 

Answer 3

आप document.querySelector बजाय document.querySelectorAll उपयोग करने के लिए है, क्योंकि अगले क्वेरी एक single HTMLElement पर निर्भर करता है लेकिन document.querySelectorAll एक NodeList रिटर्न की जरूरत है।

document.addEventListener('DOMContentLoaded', TestCtrl); 
 

 
function TestCtrl() { 
 
    var firstArticle = document.querySelector('article.first'); 
 
    
 
    console.log('oferts', firstArticle.querySelectorAll('.oferts')); 
 
}

<article class="first">  
 
    <div class="feature parts"> 
 
    <div class="oferts"> 
 
     <div class="heart icons"></div> 
 
     <h1>Build with passion</h1> 
 
    </div> 
 
    </div> 
 
</article>