title: What is happening behind .setAttribute vs .attribute=?
body: <p><strong>Description:</strong></p>
  
  <p>I am using simple <code>javascript</code> to set a the value of an <code>input</code>. I am using multiple methods that appear to be the same but with different results. Here is an example:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;input name="testinput" value="" type="text" /&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var input = document.getElementByTagName('input')[0];
  input.value = "5"
  
  console.log(input.value) // returns "5"
  console.log(input.getAttribute("value")) // returns ""
  </code></pre>
  
  <p>Of course the functionality is reversed when using the <code>setAttribute()</code> function. Yet, when on form submit they both give a <code>input=5</code> result. </p>
  
  <p><strong>Question:</strong></p>
  
  <p>What is the point of separating the two properties? is the <code>.value</code> stored differently than the <code>.getAttribute("value")</code>? </p>
  
  <p><strong>Disclaimer:</strong></p>
  
  <p>I have read: </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript">When to use setAttribute vs .attribute= in JavaScript?</a></li>
  <li><a href="https://stackoverflow.com/questions/8018814/setting-a-property-via-property-or-setattribute">Setting a property via property or setAttribute</a></li>
  </ul>
  
  <p>Both of those question/answers left me confused and unsatisfied. </p>