मुझे आश्चर्य है कि क्या मुझे पता है कि जावास्क्रिप्ट पिछला भाई और पिछला तत्व में क्या अंतर है। मैंने कोशिश की और मुझे ऐसा कोई प्रश्न या लेख नहीं मिला जो इसकी तुलना या वर्णन करता हो। शायद यह मेरे छोटे जावास्क्रिप्ट ज्ञान के लिए है, लेकिन अगर मैं इसे समझाता हूं तो मैं सराहना करता हूं।

बहुत बहुत धन्यवाद।

20
QMaster 23 सितंबर 2018, 18:45

2 जवाब

सबसे बढ़िया उत्तर

previousElementSibling गुण निर्दिष्ट तत्व के पिछले तत्व को उसी ट्री स्तर पर लौटाता है।

इस संपत्ति और previousSibling के बीच का अंतर यह है कि previousSibling पिछले सिबलिंग नोड को एक तत्व नोड, एक टेक्स्ट नोड या एक टिप्पणी नोड के रूप में लौटाता है, जबकि previousElementSibling पिछले सिबलिंग नोड को एक के रूप में लौटाता है। तत्व नोड (पाठ और टिप्पणी नोड्स को अनदेखा करता है)।

//Get the second li element
var liElement = document.getElementById( "target" ) ;

//Get the previous element (→ Text node (line feed and tab character))
var previousSibling = liElement.previousSibling ;
console.log("previousElementSibling::"+previousSibling.data);
console.log("previousSibling.previousElementSibling::",previousSibling.previousElementSibling);

//Get the previous element (→ <li> Element 3 </ li>)
var previousElementSibling = liElement.previousElementSibling ;
console.log("previousElementSibling::",previousElementSibling);
<ul>
	<li>Element-1</li>↓
	<li id="target">Element-2</li>
	<li>Element-3</li>
</ul>
29
QMaster 30 नवम्बर 2019, 13:38

previousSibling आपको पिछला दस्तावेज़ नोड प्राप्त करता है जो आवश्यक रूप से एक HTML element नहीं है।

पिछला HTML तत्व प्राप्त करने के लिए previousElementSibling जाने का एक तरीका है।

उदाहरण (previousSibling):

<img id="b0"><img id="b1"><img id="b2">

इस उदाहरण में, हमारे पास सीधे एक दूसरे से सटे img तत्वों की एक श्रृंखला है, जिनके बीच no whitespace है।

document.getElementById("b1").previousSibling;    // <img id="b0">
document.getElementById("b2").previousSibling.id; // "b1"

परंतु:

<img id="b0">
<img id="b1">
<img id="b2">

इस उदाहरण में, img तत्वों के बीच whitespace text nodes (लाइन ब्रेक) हैं।

document.getElementById("b1").previousSibling;       //  [object Text] 

In the above case, it is an empty string that sets between two img items that help to format the HTML document itself.

उदाहरण (previousElementSibling):

<img id="b0">
<img id="b1">
<img id="b2">

आउटपुट:

document.getElementById("b1").previousElementSibling  // <img id="b0"></img>

यहां .previousElementSibling अपने माता-पिता की बच्चों की सूची में निर्दिष्ट तत्व से ठीक पहले तत्व लौटाता है जो <img id="b0"></img> है

2
Khageshwor 28 अप्रैल 2021, 05:36