title: textContent not changing dom element, even it shows it is
body: <p>Okay, so I'm trying to change the text value of an <code>option</code> element which is under a <code>select</code> element. It is working and not working at the same time. At first, I thought my selection is not correct, so I copied the JS Path directly using DevTool.
  Let's first see what's the current value is:</p>
  <pre><code>&gt; document.querySelector(&quot;#loc-type &gt; option:nth-child(1)&quot;).textContent;
  &lt;- 'Select Location'
  </code></pre>
  <p>Cool, now let's change the value:</p>
  <pre><code>&gt; document.querySelector(&quot;#loc-type &gt; option:nth-child(1)&quot;).textContent = &quot;Something&quot;;
  &lt;- 'Something'
  </code></pre>
  <p>Now let's make sure it got changed:</p>
  <pre><code>&gt; document.querySelector(&quot;#loc-type &gt; option:nth-child(1)&quot;).textContent;
  &lt;- 'Something'
  </code></pre>
  <p>The console is suggesting that the value has been changed but if I check on the browser, it is not changed, if I check under Elements, it is not changed. Another thing is if I change the value directly from the Elements tab, it takes effect.</p>
  <p>Actual HTML:</p>
  <pre><code>&lt;select name=&quot;in_loc&quot; id=&quot;loc-type&quot; class=&quot;someClass&quot; data-placeholder=&quot;Species&quot; data-issearch=&quot;true&quot; tabindex=&quot;0&quot; aria-hidden=&quot;false&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Select Location&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>There are other 'option' elements inside, but I think they are not relevant?</p>
  <p>Anyway, I'm pretty sure I'm missing something very basic here, so if anyone can point it out, I'll be grateful.</p>