लोड हो रहा है...

एलिमेंट चुनना

बेकरी की शेल्फ पर एक शीर्षक है और तीन पर्चियाँ। शीर्षक कहता है Rye। पर्चियाँ शिफ्ट लिखती हैं: Morning, Noon, Evening। आखिरी पर्ची पर क्लास sold भी है। शेल्फ एक main है जिसका id shelf है। अंदर id loaf वाला h2 है, फिर क्लास tag वाले तीन p। चुनना मतलब जीवित दस्तावेज़ से वही नोड उस नाम पर माँगना जो तुम रखते हो। document.getElementById("loaf") शीर्षक लौटाता है और उसका पाठ Rye है। document.getElementsByClassName("tag") एक जीवित सूची देता है, लंबाई 3। document.querySelector(".tag") पहली पर्ची देता है, यानी Morning। document.querySelectorAll(".tag") स्थिर सूची देता है, और घर 1 Noon है। जो नाम शेल्फ पर कभी नहीं लिखा, वह querySelector से null आता है और querySelectorAll से लंबाई 0 की सूची।

पाँच पुकार, पेड़ में नीचे चलना नहीं

DOM वाले पेज ने शीर्षक का पिता बताया और एलिमेंट बच्चों को हर नोड से गिना। इस पेज पर parentElement, nextElementSibling और children नहीं पढ़े जाते, और Math भी नहीं पुकारा जाता। पेड़ पहले से है। यहाँ तय होता है कौन-सी पुकार एक नोड देती है, कौन-सी सूची, और कौन-सा जवाब कहता है कि कुछ मिला ही नहीं।

हर पुकार क्या लौटाती है

गिनती उस शेल्फ पर लो जहाँ सिर्फ़ शीर्षक और तीन पर्चियाँ हों। नीचे वाली पढ़ने वाली फ़ाइल एक और अनुच्छेद जोड़ती है, इसलिए वहाँ p की गिनती बदल जाती है।

📊 हर पुकार क्या लौटाती है

पुकार क्या वापस आता है इस शेल्फ पर आसानी से उलझता है
getElementById("loaf") एक एलिमेंट, या null शीर्षक का पाठ Rye सूची जिसे घर से पढ़ना पड़ता है
getElementsByClassName("tag") जीवित HTMLCollection लंबाई 3 बिंदु लिखना, जैसे .tag
getElementsByTagName("p") जीवित HTMLCollection लंबाई 3 खुद शीर्षक, जो h2 है
querySelector(".tag") पहला मैच, या null पर्ची Morning हर पर्ची
querySelectorAll(".tag") स्थिर NodeList लंबाई 3; घर 1 Noon है एक जीवित संग्रह
querySelectorAll(".oven") खाली NodeList लंबाई 0 null

क्लास वाला मेथड और CSS सिलेक्टर बिंदु को एक तरह नहीं लिखते। getElementsByClassName("tag") नंगा नाम tag माँगता है। getElementsByClassName(".tag") ऐसी क्लास ढूँढता है जिसका नाम सचमुच .tag हो, और लंबाई 0 देता है। querySelector CSS चाहता है, इसलिए बिंदु .tag पर रहता है। querySelector("tag") ऐसे एलिमेंट को ढूँढता है जिसका टैग नाम tag हो, कुछ नहीं मिलता, और null देता है। घर 0 पहली पर्ची है। घर 1 Noon है। getElementsByClassName की सूची जीवित है: बाद का पेज एक और tag पर्ची जोड़े तो लंबाई बढ़ती है। querySelectorAll वही लंबाई रखता है जो पुकार के वक्त थी। Evening पर दो क्लास हैं, tag और sold, इसलिए वह लंबाई 3 की सूची में है और sold का अकेला मैच भी वही है।

एक id, एक एलिमेंट

id पेज पर अनोखा होना चाहिए। getElementById वही एक एलिमेंट देता है, और id न हो तो null। सूची नहीं देता। यह मेथड सिर्फ़ document पर है, एलिमेंट पर नहीं।

एक id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

पहली पंक्ति Rye है। दूसरी false है, क्योंकि शीर्षक शेल्फ पर है। अगर दो एलिमेंट एक ही id loaf बाँटें, तब भी पुकार दस्तावेज़ का पहला ही लौटाती है।

क्लास का नाम और टैग का नाम

दोनों पुकार जीवित HTMLCollection देती हैं। एक पर्ची उठाने से पहले length पढ़ो। गिनती चार एलिमेंट वाली शेल्फ पर है, पढ़ने वाली फ़ाइल पर नहीं।

क्लास और टैग

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

पंक्तियाँ 3, 3 और 1 हैं। तीन पर्चियाँ tag बाँटती हैं। तीनों p हैं और शीर्षक h2 है, इसलिए इस शेल्फ पर टैग की गिनती क्लास की गिनती से मिलती है। सिर्फ़ Evening पर sold है। getElementsByClassName(".tag") दूसरी पुकार है: बिंदु क्लास के नाम का हिस्सा नहीं, इसलिए वह लंबाई 0 है।

पहला CSS मैच

querySelector एक एलिमेंट देता है, दस्तावेज़ के क्रम में पहला, या null।

पहला मैच

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

पहली पंक्ति Morning है। दूसरी Evening। #shelf .sold का मतलब शेल्फ के अंदर क्लास sold वाला एलिमेंट है, खुद शेल्फ नहीं। document.getElementById("shelf").querySelector(".sold") खोज शेल्फ से शुरू करता है और उसी Evening पर्ची पर पहुँचता है।

हर मैच, फिर घर

querySelectorAll हर मैच को स्थिर NodeList में देता है। सूची खाली हो सकती है। वह null नहीं है।

सभी मैच

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

लंबाई 3 है। घर 1 Noon है। घर 0 Morning है और घर 2 Evening। बाद की स्क्रिप्ट पर्ची जोड़े तो यह सूची नहीं बढ़ती। getElementsByClassName("tag") वाली HTMLCollection बढ़ जाती। एक उसी पल की तस्वीर है, दूसरी जीवित रहती है।

नाम जो शेल्फ ने नहीं लिखा

ऐसा id और ऐसी क्लास माँगो जो फ़ाइल में नहीं है।

कुछ नहीं मिला

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

पहली पंक्ति null है। दूसरी null है। तीसरी 0 है। कुछ न मिले तब भी querySelectorAll सूची देता है, इसलिए लंबाई 0 पढ़ो, और सूची खुद null नहीं है। getElementById के पास देने को सूची नहीं है, इसलिए चूक null है, 0 नहीं।

पेज पर एक पंक्ति

एक अनुच्छेद बताता है कितनी tag पर्चियाँ हैं, पहली पर्ची क्या है, और sold वाली कौन है। स्क्रिप्ट body के अंत में है, जब एलिमेंट बन चुके हों। पंक्ति वाले अनुच्छेद पर क्लास tag नहीं है, इसलिए वह उन तीन में नहीं है।

पेज डेमो — तीन पर्चियाँ

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

अनुच्छेद लिखता है 3 / Morning / Evening। इस फ़ाइल पर getElementsByTagName("p") 4 गिनता है, क्योंकि पंक्ति एक और p है। querySelectorAll(".tag") फिर भी 3 है। अगला पेज उन एलिमेंट का HTML बदलता है जिन्हें ये पुकारें पहले ही पा चुकी हैं।

शेल्फ जाँचो

  1. शीर्षक का पाठ लॉग करो और Rye चाहो, फिर null जाँच और false चाहो
  2. क्लास की लंबाई, p की लंबाई, और sold की लंबाई लॉग करो: 3, 3 और 1
  3. पहले .tag का पाठ लॉग करो और Morning चाहो, फिर #shelf .sold और Evening चाहो
  4. querySelectorAll की लंबाई लॉग करो और 3 चाहो, फिर घर 1 और Noon चाहो
  5. गायब id और गायब querySelector लॉग करो; दोनों बार null
  6. querySelectorAll(".oven").length लॉग करो और 0 चाहो
  7. अनुच्छेद पढ़ो और 3 / Morning / Evening चाहो

गलत पुकार

पेज खुलता रहता है। जो पुकार तुमने लिखी, उसने कुछ और माँगा।

  • .tag को getElementsByClassName देना; बिंदु सिर्फ़ CSS सिलेक्टर में है
  • बिना बिंदु tag को querySelector देना और पर्चियाँ चाहना
  • घर 1 को पहली पर्ची पढ़ना
  • querySelectorAll की चूक को null मानना, जबकि लंबाई 0 है
  • getElementById की चूक को लंबाई 0 की सूची मानना
  • पढ़ने वाली फ़ाइल पर getElementsByTagName("p") गिनकर 3 चाहना
  • HTMLCollection पर .map पुकारना; यह ऐरे नहीं है
  • इस पेज पर parentElement पढ़ना; वह पेड़ वाले पेज का काम था

ये साथ ले जाओ

  • getElementById एक एलिमेंट देता है, या null
  • getElementsByClassName और getElementsByTagName जीवित HTMLCollection देते हैं
  • क्लास वाला मेथड tag चाहता है, .tag नहीं
  • querySelector पहला CSS मैच देता है, या null
  • querySelectorAll स्थिर NodeList देता है; चूक की लंबाई 0 है
  • घर 0 Morning है और घर 1 Noon
  • अगला पेज उन एलिमेंट का HTML बदलता है जिन्हें तुम चुन चुके हो

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 45 का 45
Javascript ट्यूटोरियल