setAttribute या सीधे के माध्यम से इनपुट के मूल्य को सेट करने के बीच अंतर क्यों?

Question

DevTools में, इन दो पंक्तियों चलाएँ:

1.

window.x = document.createElement("input"); 
x.type="text"; 
x.name="nm"; 
x.value="val"; 
x 
// <input type="text" name="nm"> 

2.

window.x = document.createElement("input"); 
x.type="text"; 
x.name="nm"; 
x.setAttribute("value", "val"); 
x 
// <input type="text" name="nm" value="val"> 

इसे दूसरे तरीके से क्यों मुद्रित जायेगा? मान दोनों मामलों में ठीक से सेट किया गया प्रतीत होता है। ऐसा लगता है कि संपत्ति और डोम विशेषता के बीच एक डिस्कनेक्ट है।

संपत्ति के लिए गेटर .value.getAttribute('value') के परिणाम से अलग हो जाता है। मैं पूरे दिन setAttribute() कर सकता हूं, लेकिन .value पुराना मान देता है।

Answer 1

दोनों दृष्टिकोणों के बीच मुख्य अंतर अंतर्निहित defaultValue संपत्ति को निर्धारित कर रहा है। जब आप setAttribute का उपयोग करते हैं, तो defaultValue संपत्ति दोनों के साथ-साथ value संपत्ति अपडेट/सेट की जाएगी। जबकि .value का उपयोग करके value केवल इसकी संपत्ति अपडेट/सेट कर दी जाएगी।

व्यवहार 1: (स्थापित करने मूल्य setAttribute का उपयोग कर)

x.setAttribute("value","test"); 
x.defaultValue; //"test" 
x.value; //"test" 

व्यवहार 2: (स्थापित करने मूल्य सीधे मूल्य संपत्ति का उपयोग कर)

x.value = "test"; 
x.defaultValue; //"" 
x.value; //"test"