HTML DOM parentElement Property - पैरेंट एलिमेंट प्राप्त करें

HTML DOM parentElement Property

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

Syntax

element.parentElement

उदाहरण

चयनित विकल्प (<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 parentElement 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.parentElement.nodeName + " एलिमेंट";
  }
</script>
</body>
</html>

आउटपुट

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

parentNode vs parentElement

मुख्य बिंदु

• parentElement केवल एलिमेंट नोड्स पर उपलब्ध है
• यह हमेशा एक एलिमेंट नोड या null लौटाता है (कभी डॉक्यूमेंट नोड नहीं)
• रूट एलिमेंट (<html>) के लिए parentElement null लौटाता है
• DOM ट्री में एलिमेंट-टू-एलिमेंट नेविगेशन के लिए अधिक विशिष्ट
• केवल पढ़ने के लिए है (read-only)