JavaScript Academy · पाठ

पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना

संबंधित नोड्स के बीच DOM ट्री में नेविगेट कीजिए।

पाठ 3, कुल 4 में से13 चरण

पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

ट्री पर आगे बढ़ने की आवश्यकता क्यों

एक तत्व मिलने के बाद अक्सर आपको उसके संबंधित तत्वों की आवश्यकता होती है: उसके चारों ओर का container, उसके अंदर के आइटम या उसके ठीक बगल वाला तत्व। DOM की traversal प्रॉपर्टी आपको ट्री में आगे बढ़ने देती हैं।

parentElement

parentElement आपको वह तत्व देता है जिसमें वर्तमान तत्व शामिल है, या ट्री के शीर्ष पर null देता है।

const item = document.querySelector(".item");
const container = item.parentElement;
console.log(container.className);

चाइल्ड तत्व

children किसी तत्व के सीधे चाइल्ड तत्वों का सक्रिय HTMLCollection होता है (टेक्स्ट नोड इसमें शामिल नहीं होते)।

const list = document.querySelector("ul");
console.log(list.children.length);

firstElementChild और lastElementChild

ये किसी तत्व के पहले या आखिरी चाइल्ड तत्व पर सीधे ले जाते हैं और टेक्स्ट या टिप्पणी नोड को छोड़ देते हैं।

const list = document.querySelector("ul");
console.log(list.firstElementChild.textContent);
console.log(list.lastElementChild.textContent);

nextElementSibling

nextElementSibling उसी पैरेंट के अंदर वर्तमान तत्व के तुरंत बाद वाला तत्व लौटाता है।

const current = document.querySelector("li.active");
const after = current.nextElementSibling;

previousElementSibling

previousElementSibling विपरीत दिशा में आगे बढ़ता है। जब कोई सिब्लिंग नहीं होता, तो दोनों null लौटाते हैं।

const current = document.querySelector("li.active");
const before = current.previousElementSibling;

तत्व बनाम नोड प्रॉपर्टी

सावधान रहें: childNodes, nextSibling और parentNode में टेक्स्ट नोड (रिक्त स्थान सहित) शामिल होते हैं। आमतौर पर *Element* वाले संस्करण ही आपके लिए सही होते हैं।

list.childNodes;          // includes whitespace text nodes
list.children;            // only elements

closest

closest वर्तमान तत्व से ट्री में ऊपर जाता है और किसी चयनकर्ता से मेल खाने वाला सबसे निकटतम पूर्वज (या स्वयं वही तत्व) लौटाता है।

const btn = document.querySelector(".delete");
const row = btn.closest("tr");

इवेंट प्रतिनिधिकरण के लिए closest

जब क्लिक किसी अंदरूनी तत्व पर होता है, लेकिन आपको उसे संभालने वाला बाहरी container चाहिए, तब closest बहुत उपयोगी होता है।

function onClick(e) {
  const card = e.target.closest(".card");
  if (card) {
    console.log(card.dataset.id);
  }
}

matches

matches जाँचता है कि कोई तत्व स्वयं किसी चयनकर्ता को पूरा करता है या नहीं और एक बूलियन लौटाता है। यह traversal के साथ उपयोगी होता है।

const el = document.querySelector(".item");
console.log(el.matches(".item.active"));

traversal को संयोजित करना

जटिल संरचनाओं में जाने के लिए आप traversal चरणों को जोड़ सकते हैं, जैसे किसी बटन से ऊपर उसकी row तक और फिर अगली row तक जाना।

const next = btn.closest("tr").nextElementSibling;

त्वरित जाँच

सही प्रॉपर्टी चुनें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

आप parentElement और closest से ऊपर, children, firstElementChild और lastElementChild से चाइल्ड तत्वों के अंदर, तथा nextElementSibling और previousElementSibling से बगल की दिशा में जा सकते हैं। रिक्त स्थान वाले टेक्स्ट नोड को छोड़ने के लिए केवल-तत्व वाली प्रॉपर्टी को प्राथमिकता दें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना” में मैं क्या सीखूँगा?

संबंधित नोड्स के बीच DOM ट्री में नेविगेट कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

querySelector से तत्व चुनना
getElementById और getElementsByClassName
पैरेंट, चाइल्ड और सिब्लिंग में आगे बढ़ना
NodeList बनाम HTMLCollection

← JavaScript Academy पर वापस जाएँ