← Back to JavaScript Course | Chapter 4: Modern JS, Async & DOM | Lesson 21 of 26

JS DOM नेविगेशन

एक बार जब आप कोई DOM element select कर लेते हैं, तो अक्सर आपको बिना एक पूरी नई query चलाए, उसके पास वाले किसी element पर जाना होता है -- उसका parent, उसका अगला sibling, उसका पहला child। DOM navigation properties (parentNode, nextElementSibling, firstElementChild, वगैरह) आपको किसी मौजूदा element के relative tree में घूमने देते हैं।

In this page:

  1. Parent Element तक Navigate करना
  2. Child Elements तक Navigate करना
  3. Sibling Elements तक Navigate करना
  4. Event Target के Relative Navigate करना
  5. Navigation बनाम Re-querying: कौन सा इस्तेमाल करें
Syntax
javascript 
element.parentNode;
element.children;
element.firstElementChild;
element.nextElementSibling;
element.previousElementSibling;

Parent Element तक Navigate करना

.parentElement DOM tree में किसी element के सीधे parent को return करता है -- यह ऊपर की ओर जाने के लिए उपयोगी है, जैसे किसी clicked बटन के containing card या list item को ढूंढना, बिना उस ancestor को सीधे select किए।

Note: जब आपको खासतौर पर एक Element result चाहिए, कोई भी node type नहीं, तो पुराने .parentNode के बजाय .parentElement (जो एक Element या null return करता है) इस्तेमाल करें।
Warning: root <html> element पर .parentElement कॉल करने पर null मिलता है, क्योंकि उसका कोई parent element नहीं है -- बार-बार ऊपर जाने वाले code को इस boundary पर आखिरकार पहुंचने का ध्यान रखना चाहिए।

उदाहरण: Navigating to a Parent Element

javascript 
<div id="parent"><button id="child">Click</button></div>
<script>
  // Declare the constant `child`, set to `document.getElementById("child")`
  const child = document.getElementById("child");
  // Print `child.parentElement.id` to the console
  console.log(child.parentElement.id);
</script>

Child Elements तक Navigate करना

.children किसी element के सीधे child elements (text और comment nodes को छोड़कर) का एक live collection return करता है, और .firstElementChild / .lastElementChild उन children के पहले या आखिरी तक सीधे जाते हैं, पूरे collection में index किए बिना।

Note: जब आपको खासतौर पर सिर्फ element children चाहिए, formatted HTML में tags के बीच अक्सर आने वाले whitespace text nodes को छोड़ते हुए, तो .childNodes के बजाय .children इस्तेमाल करें।
Warning: .firstElementChild और .lastElementChild null return करते हैं अगर element में कोई child element बिल्कुल न हो, भले ही उसमें text content मौजूद हो।

उदाहरण: Navigating to Child Elements

javascript 
<ul id="list"><li>A</li><li>B</li></ul>
<script>
  // Declare the constant `list`, set to `document.getElementById("list")`
  const list = document.getElementById("list");
  // Print `list.children.length` to the console
  console.log(list.children.length);
  // Print `list.firstElementChild.textContent` to the console
  console.log(list.firstElementChild.textContent);
  // Print `list.lastElementChild.textContent` to the console
  console.log(list.lastElementChild.textContent);
</script>

Sibling Elements तक Navigate करना

.nextElementSibling और .previousElementSibling उसी tree level पर पास वाले element तक जाते हैं, किसी भी दिशा में -- यह relative operations के लिए उपयोगी है, जैसे user के click किए हुए item के ठीक बाद वाले item को highlight करना।

Note: इन sibling properties का इस्तेमाल तब करें जब कोई operation सच में किसी जाने-पहचाने element के relative tree position पर निर्भर हो, पूरे document को फिर से query करने के बजाय।
Warning: किसी group में पहले element का कोई previousElementSibling नहीं होता (null return होता है), और आखिरी का कोई nextElementSibling नहीं होता (वह भी null) -- इन boundaries पर हमेशा सावधान रहें।

उदाहरण: Navigating to Sibling Elements

javascript 
<ul><li id="first">A</li><li id="second">B</li></ul>
<script>
  // Declare the constant `first`, set to `document.getElementById("first")`
  const first = document.getElementById("first");
  // Print `first.nextElementSibling.textContent` to the console
  console.log(first.nextElementSibling.textContent);
</script>

Event Target के Relative Navigate करना

event.target (जिस element ने event trigger किया) को navigation properties के साथ मिलाना आपको हर चीज़ के लिए अलग IDs के बिना related elements ढूंढने और बदलने देता है -- जैसे किसी delete बटन के containing list item को ढूंढकर उसे हटाना, सिर्फ tree relationships से काम करते हुए।

Note: बार-बार दोहराई गई structure वाले components (जैसे list items) के लिए event.target से relative navigation इस्तेमाल करें, हर related element को unique IDs देने की ज़रूरत से बचते हुए।
Warning: event.target से navigate करना एक खास, consistent tree structure मान लेता है -- अगर HTML structure बाद में बदल जाए, तो उसके इर्द-गिर्द लिखा गया navigation code चुपचाप टूट सकता है।

उदाहरण: Navigating Relative to an Event Target

javascript 
<ul>
  <li>Item <button class="del">X</button></li>
</ul>
<script>
  document.querySelector(".del").addEventListener("click", (e) => {
    // Print `e.target.parentElement.textContent` to the console
    console.log(e.target.parentElement.textContent);
  });
</script>

Navigation बनाम Re-querying: कौन सा इस्तेमाल करें

Navigation properties तब आदर्श हैं जब आपके पास पहले से किसी पास वाले element का reference हो और बस उसके relative जाना हो -- document root से querySelector() फिर से चलाना तब ज़्यादा सही है जब आपको ऐसा कुछ ढूंढना हो जो आपके मौजूदा किसी reference से असंबंधित हो।

Note: किसी navigation property का इस्तेमाल तब करें जब target element की position आपके मौजूदा element के relative पता और स्थिर हो; बाकी सब के लिए querySelector इस्तेमाल करें।
Warning: किसी दूर के element तक पहुंचने के लिए कई navigation properties को एक साथ chain करना (parentElement.parentElement.nextElementSibling.firstElementChild) code को fragile और पढ़ने में मुश्किल बना देता है -- एक targeted selector अक्सर ज़्यादा साफ होता है।

उदाहरण: Navigation vs Re-querying: Which to Use

javascript 
<div id="card"><button id="btn">Click</button></div>
<script>
  document.getElementById("btn").parentElement;
  // Print `document.querySelector("#card")` to the console
  console.log(document.querySelector("#card"));
</script>
Live Example
Related Topics

JS DOM कलेक्शन्स · JS DOM मेथड्स · JS का DOM · JS एडवांस्ड Events

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. non-Element-specific properties (childNodes, nextSibling) इस्तेमाल करना जब आप specifically element-only navigation चाहते हैं, क्योंकि उनमें text nodes (जैसे whitespace) भी शामिल होते हैं जिन्हें childNodes और nextSibling filter नहीं करते।
  2. यह मान लेना कि कोई navigation property हमेशा कुछ return करेगी -- last child पर .nextElementSibling, या document root पर .parentElement, null return करते हैं, और code को यह handle करना चाहिए।
  3. querySelector से DOM को दोबारा query करना जब एक simple navigation property (जैसे .parentElement) कम overhead के साथ same element ढूंढ सकती।
चैप्टर सारांश
  • parentElement, children, firstElementChild, और lastElementChild related elements तक navigate करते हैं, text/comment nodes को skip करते हुए।
  • nextElementSibling और previousElementSibling same tree level पर adjacent sibling elements तक जाते हैं।
  • उस दिशा में कुछ न होने पर ये properties null return कर सकती हैं, इसलिए result इस्तेमाल करने से पहले check करना मायने रखता है।
ब्राउज़र सपोर्ट

सभी Element-based DOM navigation properties हर modern browser में supported हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Next Lesson → JS DOM Collections

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.