HTML DOM parentNode Property - पैरेंट नोड प्राप्त करें

HTML DOM parentNode Property

HTML DOM parentNode property निर्दिष्ट नोड के पैरेंट नोड ऑब्जेक्ट को HTML दस्तावेज़ में लौटाता है। यह किसी भी नोड प्रकार (एलिमेंट, टेक्स्ट, कमेंट, आदि) के लिए काम करता है और पैरेंट नोड लौटाता है (जो एलिमेंट या डॉक्यूमेंट हो सकता है)।

Syntax

node.parentNode

उदाहरण

चयनित विकल्प (<option>) का पैरेंट एलिमेंट (<select>) ढूंढना:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  .drop-down {
    width: 35%;
    border: 2px solid #fff;
    font-weight: bold;
    padding: 8px;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM parentNode Property Demo</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down'>
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
</select>
<button onclick="showParent()" class="btn">विकल्प एलिमेंट का पैरेंट दिखाएं</button>
<div class="show"></div>
<script>
  function showParent() {
    var dropDown = document.querySelector(".drop-down");
    var option = dropDown.options[dropDown.selectedIndex];
    var msg = document.querySelector(".show");
    msg.innerHTML = "विकल्प एलिमेंट का पैरेंट एलिमेंट है " + option.parentNode.nodeName + " एलिमेंट";
  }
</script>
</body>
</html>

आउटपुट

ड्रॉप-डाउन से कोई विकल्प चुनें और "विकल्प एलिमेंट का पैरेंट दिखाएं" बटन पर क्लिक करें। यह "विकल्प एलिमेंट का पैरेंट एलिमेंट है SELECT एलिमेंट" प्रदर्शित करेगा।

मुख्य बिंदु

• parentNode किसी भी नोड प्रकार के लिए काम करता है (एलिमेंट, टेक्स्ट, एट्रिब्यूट, कमेंट, आदि)
• यह पैरेंट नोड लौटाता है, जो एलिमेंट नोड या डॉक्यूमेंट नोड हो सकता है
• parentElement के विपरीत, parentNode गैर-एलिमेंट पैरेंट भी लौटा सकता है
• DOM ट्री ट्रैवर्सल (ऊपर की ओर नेविगेशन) के लिए मौलिक property
• केवल पढ़ने के लिए है (read-only) - इसे सेट नहीं किया जा सकता