HTML DOM previousElementSibling प्रॉपर्टी

previousElementSibling प्रॉपर्टी क्या है?

HTML DOM previousElementSibling प्रॉपर्टी किसी तत्व के समान पैरेंट में उसी ट्री लेवल पर पिछले तत्व नोड (Element Node) को लौटाती है। यह केवल तत्व नोड्स (टैग) को ध्यान में रखती है, टेक्स्ट नोड्स या कमेंट नोड्स को अनदेखा करती है।

सिंटैक्स

element.previousElementSibling

रिटर्न मान

पिछला तत्व नोड (Element ऑब्जेक्ट), या null यदि कोई पिछला तत्व सिबलिंग नहीं है।

उदाहरण

यह उदाहरण "Chemistry" सूची आइटम के पिछले तत्व सिबलिंग को खोजता है:

<!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: 50%; border: 2px solid #fff; font-weight: bold; padding: 8px; }
  ul { list-style-type: none; padding: 0; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 50%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM previousElementSibling प्रॉपर्टी डेमो</h1>
<p>नमस्ते, मेरे पसंदीदा विषय हैं:</p>
<ul>
  <li>Physics</li>
  <li id="chemistry">Chemistry</li>
  <li>Maths</li>
  <li>English</li>
</ul>
<button class="btn" onclick="showSibling()">Chemistry का पिछला सिबलिंग दिखाएं</button>
<div class="show"></div>
<script>
  function showSibling() {
    var chemistry = document.querySelector("#chemistry");
    var prev = chemistry.previousElementSibling;
    if (prev) {
      document.querySelector(".show").innerHTML = "पिछला तत्व सिबलिंग: " + prev.innerHTML;
    } else {
      document.querySelector(".show").innerHTML = "कोई पिछला तत्व सिबलिंग नहीं";
    }
  }
</script>
</body>
</html>

आउटपुट

बटन पर क्लिक करने पर, "Physics" प्रदर्शित होता है क्योंकि यह "Chemistry" से पहले वाला एकमात्र तत्व सिबलिंग है।

previousElementSibling बनाम previousSibling

उपयोग के मामले

• DOM ट्रैवर्सल: तत्वों के बीच नेविगेट करना बिना व्हाइटस्पेस टेक्स्ट नोड्स की चिंता किए।
• फॉर्म सत्यापन: पिछले इनपुट फ़ील्ड तक पहुंचना।
• सूची मैनिपुलेशन: सूची आइटम्स के बीच नेविगेट करना।
• UI घटक: टैब, एकॉर्डियन, या कैरोसेल में पिछले/अगले तत्व ढूंढना।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन (IE9+)