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

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

DOM previousSibling प्रॉपर्टी किसी नोड के समान पैरेंट में उसी ट्री लेवल पर पिछले नोड (किसी भी प्रकार का: तत्व, टेक्स्ट, कमेंट) को लौटाती है। यह previousElementSibling के विपरीत सभी नोड प्रकारों को ध्यान में रखती है।

सिंटैक्स

node.previousSibling

रिटर्न मान

पिछला नोड (Node ऑब्जेक्ट), या 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 previousSibling प्रॉपर्टी डेमो</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.previousSibling;
    if (prev) {
      document.querySelector(".show").innerHTML = "पिछला सिबलिंग (नोड प्रकार: " + prev.nodeType + "): " + (prev.nodeType === 3 ? "[टेक्स्ट नोड: '" + prev.textContent.trim() + "']" : prev.innerHTML);
    } else {
      document.querySelector(".show").innerHTML = "कोई पिछला सिबलिंग नहीं";
    }
  }
</script>
</body>
</html>

आउटपुट

HTML फॉर्मेटिंग के कारण (तत्वों के बीच नई लाइन और इंडेंटेशन), previousSibling अक्सर एक टेक्स्ट नोड (व्हाइटस्पेस) लौटाता है, न कि "Physics" <li> तत्व।

previousSibling बनाम previousElementSibling

व्यावहारिक सलाह

• अधिकांश मामलों के लिए previousElementSibling का उपयोग करें - यह अधिक पूर्वानुमानित है और व्हाइटस्पेस से अप्रभावित रहता है।
• previousSibling का उपयोग तब करें जब आपको वास्तव में सभी नोड्स (टेक्स्ट नोड्स, कमेंट्स सहित) को प्रोसेस करने की आवश्यकता हो।
• यदि previousSibling का उपयोग कर रहे हैं, तो nodeType === 1 (ELEMENT_NODE) से जांच करें कि यह एक तत्व है या नहीं।

संबंधित प्रॉपर्टीज़

• nextSibling / nextElementSibling
• parentNode / parentElement
• firstChild / firstElementChild
• lastChild / lastElementChild